ListView 在 IOS 键盘后面呈现 - React Native

Question

在我的本机反应应用程序中，我有一个呈现 TextInput 和 ListView 的视图。 ListView 是根据在 TextInput 中键入的内容填充的。

<View styleComponent={styleComponent.mainContainer}>
  <TextInput
    onChangeText={this.onTyping.bind(this)}
    value={this.state.text} />
  <ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => this._renderRow(rowData)} />
</View>

我的问题是 ListView 的一部分呈现在 IOS 键盘后面。在没有外部库的情况下，有什么方法可以告诉 ListView 在可用 space 中呈现，即不在键盘下方。

Answer 1

您应该使用 onBlur 和 onFocus 事件或 keyboard events plugin and adjust your list style when keyboard opened. Take a look with this: how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus。

Answer 2

使用 React Native 键盘避免查看 KeyboardAvoidingView and Example 卢克

import {ScrollView, Text, TextInput, View, KeyboardAvoidingView} from "react-native";

并在渲染函数中嵌套 View 和 TextInput

<ScrollView style={styles.container}>
          <KeyboardAvoidingView behavior='position'>
                <View style={styles.textInputContainer}>
                  <TextInput
                    value={pin}
                    style={styles.textInput}
                    keyboardType='default'
                    returnKeyType='next'
                    onChangeText={this.handleChangePin}
                    underlineColorAndroid='transparent'
                    placeholder={I18n.t('pin')}/>
                </View>
          </KeyboardAvoidingView>
        </ScrollView>

它会处理的

ListView 在 IOS 键盘后面呈现 - React Native

ListView renders behind IOS keyboard - React Native

javascript

ios

reactjs

react-native