键盘在模态中隐藏输入

Question

我在应用程序中使用 https://github.com/react-native-community/react-native-modal，带有 NativeBase 输入字段。

但是当键盘抬起时，输入框会随着上升而消失。

我已经在模态框上激活了 avoidKeyboard 属性，但它并没有解决我的问题。

我也尝试过将 KeyboardAvoidingView 放在输入字段周围，但没有成功。

有没有人知道出了什么问题？

提前致谢。

Answer 1

请试试这个 KeyboardAwareScrollView

npm i react-native-keyboard-aware-scroll-view --save

 <KeyboardAwareScrollView enableOnAndroid={true} style={{height:"100%"}}
            enableAutoAutomaticScroll={(Platform.OS === 'ios')} extraHeight={130} extraScrollHeight={130}>
                <View>
                  <FormInput />
                 </View>
      </KeyboardAwareScrollView>

Answer 2

我终于找到了解决方案，我的模态由 3 部分组成，页眉、内容和页脚。如我的问题所述，我已将 avoidKeyboard 道具放在 Modal 上，但内容仍然从屏幕上消失了。

解决方案是将 scrollEnabled={false} 放在内容上。

我的代码现在看起来像这样：

<Modal isVisible avoidKeyboard onBackdropPress={this.handleDismiss} onBackButtonPress={this.handleDismiss}>
      <View style={styles.modal}>
        <Header>
          ...
        </Header>
        <Content scrollEnabled={false} padder>
         ...
        </Content>
        <Footer>
          ...
        </Footer>
      </View>
    </Modal>

Answer 3

<Modal>
  <KeyboardAvoidingView
    behavior="position"
    enabled
  >
    {myContent}
  </KeyboardAvoidingView>
</Modal>

对我有用

键盘在模态中隐藏输入

Keyboard hide input in a modal

react-native

keyboard

native-base