React-Native 如何使用KeyboardAvoidingView

Question

当我开始输入一些消息时 header 和聊天容器 move-up。

我尝试在我的视图容器中使用 KeyboardAvoidingView，但是它没有用，我不确定 KeyboardAvoidingView 是否是在视图中控制键盘的最佳解决方案并且我不熟悉它。

下面是我的代码：

render() {
const { myName, user, nome, message } = this.props;
return (
  <View style={STYLES.main}>

    <Animatable.View
      style={STYLES.container}
      animation={FADEIN}
      easing='ease-in'
      duration={1000}
    >
      <RenderHeader3 press={() => Actions.detalhes()} hcolor={'#298CFF'} color={'#FFF'} text={nome} icon={null} isize={null} />

      <ScrollView contentContainerStyle={{ paddingHorizontal: 10, paddingTop: 5 }}>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={null}
          keyboardVerticalOffset={60}
        >
          <ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <View style={{ flexDirection: 'row', backgroundColor: '#1A1C27', padding: 10 }}>
        <View style={{ flex: 4 }}>
          <TextInput
            style={[STYLES.titleTxt, { color: '#000', backgroundColor: '#FFF', borderRadius: 40, paddingLeft: 13, paddingRight: 10 }]}
            multiline
            value={message}
            onChangeText={(texto) => this.props.modificaMensagem(texto)}
          />
        </View>
        <View style={{ justifyContent: 'center', alignItems: 'center', paddingLeft: 10 }}>
          <TouchableOpacity
            style={{
              height: 40,
              width: 40,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#298CFF',
              paddingRight: 2
            }}
            activeOpacity={0.5}
            onPress={() => this.props.createChat(myName, user, nome, message)}
          >
            <CustomIcon
              name='paper-plane'
              size={25}
              color='#FFF'
            />
          </TouchableOpacity>
        </View>
      </View>

    </Animatable.View>

  </View>
);

} }

Answer 1

进行此更改

<KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior="height"
          keyboardVerticalOffset={60}
        >

source

Answer 2

KeyboardAvoidingView has 3 types of behavior enum('height','position','padding') but you set it to null in your code. Secondly you have not added KeyboardAvoidingView in with TextInput component

<KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={'height'}
          keyboardVerticalOffset={60}
        >

React-Native 如何使用KeyboardAvoidingView

React-Native how to use KeyboardAvoidingView

keyboard

react-native