反应原生模态,避免在打开键盘时调整视图大小(Android)



我正在使用一个反应原生模态,其中包含一个视图。视图有一些文本输入元素。当键盘弹出时,View 元素全部折叠以适应剩余空间,但我根本不希望视图发生变化。

IOS 不会发生这种情况。而且,它不会在同一应用程序中的非模式视图中发生Android。

我在我的安卓清单中设置了windowSoftInputMode="adjustPan",但它似乎没有应用于模态。

return( 
<ImageBackground source={require('./../images/IMG1.png')}
        style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
  <View style={{flex: 1}}>
     (...)
     <Modal visible={this.state.modalVisible} animationType={'slide'} 
        presentationStyle={'fullScreen'}
        onRequestClose={() => this.closeModal()}>
        <ImageBackground source={require('./../images/IMG2.png')}
          style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <View style={{flex:1}}>
          (...)
          <View style={{flex:0.9, alignItems:'center', justifyContent: 'center', 
                                                  flexDirection: 'row'}}>
            <TextInput style={MyStyle.textInput}
                onChangeText={(myTitle) => this.setState({myTitle})}
                placeholder='Title'
            />
          </View>

作为一种解决方法,我最终为 modal 的子视图使用了固定高度值,而不是 flex。(使用尺寸高度获得它(。它似乎如我预期的那样工作。

似乎您需要为Modal应用statusBarTranslucent={true}道具以使模态内容不调整大小,并使键盘平移到模态内容上。

我的解决方法:我对模态的孩子使用了以下样式。

container: {
    left: 50,
    position: "absolute",
    right: 50,
    top: 50
}

最新更新