如何防止在android中打开键盘时反应本机模式向上移动？

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 上则不然。 voidKeyboard={false} 不起作用。

这是我的模态风格（位置：“绝对”也不起作用）

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

我什至尝试将 android 清单中的 softinputmode 更改为：

  android:windowSoftInputMode="adjustPan"

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}
>

试试这个，它对我有用。

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>

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”解决了这个问题

Answer 4

一个潜在的解决方案：

<Modal
      avoidKeyboard={avoidKeyboard}
      ...
      style={{
       
        ...(!avoidKeyboard && {position: 'absolute',paddingBottom:20}),
        height: screen.height,
        justifyContent: position,
        alignItems: 'center',
      }}
      hideModalContentWhileAnimating={true}
      onBackButtonPress={onClose}
      isVisible={visible}
      onBackdropPress={onClose}>
      {children}
    </Modal>