React-Native 如何使用 KeyboardAvoidingView答案

【问题标题】：React-Native how to use KeyboardAvoidingViewReact-Native 如何使用 KeyboardAvoidingView
【发布时间】：2019-10-13 13:04:53
【问题描述】：

当我开始输入一些消息时，标题和聊天容器都会向上移动。

我曾尝试在我的视图容器中使用 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>
);

} }

【问题讨论】：

KeyboardAvoidingView 有 3 种行为类型 enum('height', 'position', 'padding') 但您将其设置为 null
嗨，发现同样的问题。我使用 KeyboardAwareScrollView 对 iOS 进行了整理，但对于 Android，我使用的是 KeyboardAvoidingView 并且无法以某种方式定义键盘和文本输入之间的边距。您是否找到任何解决方案或解决方法？谢谢！

标签： react-native keyboard

【解决方案1】：

进行此更改

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

source

【讨论】：

嗨@VinilPrabhu，没用，不知道我做错了什么，我通过将行为设置为“高度”附加了一张带有结果的新图片
@GustavoMenezes KeyboardAvoidingView 应该是根标签，所有其他元素都应该在其中，如滚动视图、文本框等
你的代码应该差不多是this
我按照你的例子做了。但仍然无法正常工作，您认为我必须将某些内容更改为 android manifest 文件吗？
android:windowSoftInputMode="adjustResize" 将此行添加到清单文件中

【解决方案2】：

KeyboardAvoidingView 有 3 种类型的行为 enum('height','position','padding') 但您在代码中将其设置为 null。其次，您还没有在TextInput 组件中添加KeyboardAvoidingView

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

【讨论】：