KeyboardAvoidingView проблема с вводом текста

Question

Я использую KeyboardAvoidingView для обработки открытия клавиатуры внутри моего приложения.У меня проблема с клавиатурой и нижним полем, которую вы можете увидеть в приложении.Клавиатура покрывает часть моего компонента ввода текста.

Вот мой компонент:

return (
    <KeyboardAvoidingView style={styles.containerStyle} behavior="padding" enabled>
      <CommentsHeader
        imageUrl={otherParam.imageUrl}
        creationTime={otherParam.creationTime}
        firstName={otherParam.firstName}
        lastName={otherParam.lastName}
      />
      <FlatList
        data={comments.data}
        renderItem={this.renderDetailsItem}
        keyExtractor={(item, index) => index.toString()}
        style={styles.listStyle}
      />
      <CommentsWrite
        comment={this.state.comment}
        changeText={comment => this.setState({ comment })}
        writeComment={this.writeComment}
      />
    </KeyboardAvoidingView>

);

const styles = StyleSheet.create({
  listStyle: {
    flex: 1,
    width: '100%',
    zIndex: 2,
  },

  containerStyle: {
    height: '100%',
    width: '100%',
  },

Вот скриншот приложения:

Answer 1

Из моего опыта, behavior="padding" не дает достаточного заполнения.

Попробуйте behavior="position".

Возможно, вы хотите отключить его для Android, хотя:

behavior={Platform.OS === 'ios' ? 'position' : null}

Answer 2

Решение состоит в том, чтобы использовать специальную подставку, которая называется клавиатура VerticalOffset, но когда клавиатура закрыта, появляется пробел.

<KeyboardAvoidingView 
        style={styles.containerStyle} 
        behavior="padding" 
        enabled
        keyboardVerticalOffset={90}
        >