Question

在我的react-native应用程序中，我有一个呈现TextInput和ListView的View。 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在可用空间中呈现，即不在键盘下。

Answer 1

您应该使用onBlur和onFocus事件或keyboard events plugin并在键盘打开时调整列表样式。看看这个：how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus。

Answer 2

使用反应原生的键盘避免查看 KeyboardAvoidingView和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

2 个答案: