React-Native, как использовать KeyboardAvoidingView

Question

Когда я начинаю печатать какое-то сообщение, и заголовок, и контейнер чата поднимаются.

Я пытался использовать 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 имеет 3 типа поведения enum('height','position','padding'), но вы устанавливаете его в нуль в своем коде. Во-вторых, вы не добавили KeyboardAvoidingView в TextInput компонент

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

Answer 2

внести изменения

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

источник