Question

我正在使用包含View的反应原生模态。 View有一些TextInput元素。当键盘弹出时，View元素全部折叠以适应剩余空间，但我不希望View完全改变。

IOS会发生不。此外，它在同一个应用中的非模态视图中发生不。

我有windowSoftInputMode =＆＃34; adjustPan＆＃34;设置在我的Android Manifest中，但它似乎没有应用于Modal。

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>

Answer 1

作为一种解决方法，我最终使用Modal的子视图而不是flex的固定高度值。（使用尺寸高度获得）。它似乎按我的预期工作。

Answer 2

代替使用react-native-modals：

https://www.npmjs.com/package/react-native-modals

它反应迅速，并且有很多未来。它将同时适用于Android和iOS。

Answer 3

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

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

反映原生模态，避免在打开键盘时调整视图大小（Android）

3 个答案: