键盘在React Native中使用Scrollview和KeyboardAvoidingView阻止文本输入

Question

我正在使用RN 0.55.4 + Expo

我尝试对表单使用KeyboardAvoidingView，但是无论是否有KeyboardAvoidingView，它都不会更改任何内容，但仍会阻止我的表单。我在用 tcomb形式

这是我当前的代码

 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库，但结果仍然相同，键盘阻塞了视图/窗体。 有人知道怎么了吗？

Answer 1

对于iOS，您应该将KeyboardAvoidingView的“ behavior”参数设置为“ padding”：

<KeyboardAvoidingView behavior="padding">

引用react-native documentation：

  

注意：Android和iOS都与此道具交互不同。   如果完全不提供行为支持，Android可能会表现更好，而   iOS相反​​。

iOS和Android上的工作示例：

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

Answer 2

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

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