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

Posted 2023-03-14

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

【英文标题】：How to prevent react native modal from moving up when keyboard opens in android?

【发布时间】：2019-05-21 11:13:08

【问题描述】：

我有一个非常基本的模态组件（使用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 上没有。 AvoidKeyboard=false 不起作用。

这是我的模态风格（位置：'absolute' 也不起作用）

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

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

  android:windowSoftInputMode="adjustPan"

【问题讨论】：

尝试在其style 道具中提供position: 'absolute'！

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

【参考方案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
>

试试这个，它对我有用。

【参考方案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>