在本机反应中使用 Scrollview 和 KeyboardAvoidingView 阻止文本输入的键盘答案

【问题标题】：Keyboard blocking textinput with Scrollview and KeyboardAvoidingView in react native在本机反应中使用 Scrollview 和 KeyboardAvoidingView 阻止文本输入的键盘
【发布时间】：2018-09-10 08:29:59
【问题描述】：

我正在使用 RN 0.55.4 + Expo

我尝试在我的表单中使用KeyboardAvoidingView，但无论有没有KeyboardAvoidingView，它都不会改变任何东西，它仍然阻止我的表单。我在用 tcomb-form

这是我当前的代码

 return (
      <View style={styles.container}>

        <KeyboardAvoidingView>
        <ScrollView>

          <View>
            <Header/>

            <View style={styles.inputs}>
              <LoginForm
                formType={formType}
                form={this.props.auth.form}
                value={this.state.value}
                onChange={self.onChange.bind(self)}/>
              {passwordCheckbox}
            </View>

            <FormButton/>

            <View >
              <View style={styles.forgotContainer}>
                {leftMessage}
                {rightMessage}
              </View>
            </View>
          </View>

        </ScrollView>
        </KeyboardAvoidingView>

      </View>
    )

这就是风格

var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1
  },
  inputs: {
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10
  },
  forgotContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10
  }
})

这是显示器我也试过https://github.com/APSL/react-native-keyboard-aware-scroll-view 库，但结果还是一样，键盘挡住了视图/表单。有谁知道怎么回事？

【问题讨论】：

标签： javascript react-native react-native-android keyboard-events expo

【解决方案1】：

对于 iOS，您应该将 KeyboardAvoidingView 的“行为”参数设置为“填充”：

<KeyboardAvoidingView behavior="padding">

参考react-native documentation：

注意：Android 和 iOS 与此道具的交互方式不同。当根本没有给定行为道具时，Android 可能会表现得更好，而 iOS 则相反。

iOS 和 Android 上的工作示例：

<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>

【讨论】：

添加行为不起作用，仍然阻塞视图/表单。看起来 Scrollview 高度在键盘显示期间没有改变

【解决方案2】：

这也发生在我身上... ScrollView 和 FlatList 可以通过根据您的数据设置动态高度来解决它到 FlatList。例如：

<ScrollView>
  <FlatList style={{height: dataArr.length * YourInputHeight}}
  ...
  />
</ScrollView>

【讨论】：