如何在Android中防止React Native模态框在键盘打开时向上移动？

Question

我有一个非常基本的模态组件（使用React-native-modal），它会呈现其给定的子视图。但是，我不希望它的行为类似于 KeyBoardAvoiding 视图，即当键盘打开时，我不希望模态被推上去。

  <Modal
    isVisible={isVisible}
    onBackdropPress={onCartDismiss}
    style={CartStyles.cartModal}
    onSwipeEnd={this.onCartDismiss}
    onSwipe={this.onCartDismiss}
    swipeDirection="down"
    swipeThreshold={200}
    propagateSwipe
    avoidKeyboard={false}
   >
    {this.props.children}
    ....

在iOS上，一切正常，即键盘会在模态组件之上打开，但是在Android上不行。避免键盘{false}无效。

这是我的模态框样式（position:'absolute'也不起作用）

  cartModal: {
    position: 'absolute',
    justifyContent: 'flex-end',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1,
  },

我甚至尝试在Android清单中更改softinputmode为：

  android:windowSoftInputMode="adjustPan"

- Romit Kumar

---

尝试在其style属性中给出{position: 'absolute'}！ - TalESid

尝试使用 https://github.com/zubricky/react-native-android-keyboard-adjust 动态处理 Android windowSoftInputMode。 - nazmul

Answer 1

<Modal
 isVisible={modalVisible}
 animationInTiming={500}
 animationOutTiming={1000}
 backdropTransitionInTiming={500}
 backdropTransitionOutTiming={1000}
 onBackdropPress={() => setModalVisible(!modalVisible)}
 onBackButtonPress={() => setModalVisible(!modalVisible)}
 style={{
   justifyContent: 'flex-end',
   margin: 0,
   position:'absolute'
 }}
 avoidKeyboard={false}
>

尝试这个，对我有效。

- Pankaj Kotwani

Answer 2

将您的模型高度设置为整数值，而非百分比。

 <Modal
            // style={{backgroundColor:'red'}}
            deviceHeight={screenHeight}
            deviceWidth={screenWidth}
            transparent={true} visible={isVisible} animated={false}>
<View style={{
                backgroundColor: 'rgba(0,0,0,.6)',
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <View style={{
                    flexDirection: 'row',
                    height: 200,
                    width: '80%',
                    alignSelf: 'center'
                }}>
{content}
           </View>
     </View>
</Modal>

- cain

Answer 3

在您的模态视图中，给主视图设置一个“固定高度值”，并且包含视图应该具有“100%”的视图高度。像这样：

<Modal animationType={fade} ...>
  <View style={{
      height: "100%",
      width: "100%",
      alignItems: "center",
      // justifyContent: "center",
      backgroundColor: "rgba(0, 0, 0, 0.4)",
    }}>
    <View style={{
      borderRadius: 10,
      marginHorizontal: width * 0.05,
      marginTop: height * 0.1,
      width: width * 0.9
      height: height * 0.8
    }}>
      ...`enter code here`
    </View>
  </View>
</Modal>

我通过移除 justifyContent: "center"解决了这个问题。

- Saurav