KeyboardAvoidingView与ScrollView

Question

我是一个新的反应本机,有一个问题,我没有找到反应本机文档.

我正在研究这个组件KeyboardAvoidingView:https: //facebook.github.io/react-native/docs/keyboardavoidingview.html

问题很简单 - 有没有人可以KeyboardAvoidingView很好地与之合作ScrollView？我有很多TextInputs在一个组件(TextInputs高度的总和大于设备高度),一旦键盘出现,我有各种问题..
如果我使用View而不是ScrollView一切都很好,但我不能使用它,因为我需要比设备高度更多的空间..我在KeyboardAvoidingView文档中找不到任何关于Scroll的内容.

谢谢.

Answer 1

对于那些人，这就是我的解决方案，它将可以工作并自动在焦点输入上滚动。我在博览会上尝试过此方法，希望对您有所帮助。

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
                //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

Answer 2

<View style={{flex:1}}>
   <KeyboardAvoidingView
     style={{flex:1}}
     behavior={Platform.OS === 'ios' ? 'position' : null}
     keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
   >
    <ScrollView> // no need to put here style={{flex:1}}
      <TextInput />
      <TextInput />
      <TextInput />
      <TextInput />
    </ScrollView>
  </KeyboardAvoidingView>
</View>

Answer 3

看起来facebook尚未实现scrollViews的解决方案.但是我找到了Wix所做的解决方案,它的工作原理应该:)

Answer 4

我也试图在互联网上找到解决方案,但我自己想出来了.我能够做keyboardAvoidingView与工作ScrollView在iPhone模拟器SE.

我使用了padding类型position,keyboardVerticalOffset设置为更高的值.我希望这能帮助所有陷入困境的人.

 render() {
    return (
    <View style={…..}>
        <ScrollView>
                <KeyboardAvoidingView style={{ flex: 1 }}
                keyboardVerticalOffset={100} behavior={"position"}>
                <TextInput style={styles.editInput} …./>

            </KeyboardAvoidingView>
        </ScrollView>
    </View>
)} 

Answer 5

就我而言，我使用了：https : //github.com/APSL/react-native-keyboard-aware-scroll-view。

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

它也支持较旧的 RN 版本。

我的文本输入隐藏得很深，是 ScrollView 的一些自定义子组件，但该包对 Android 和 iOS 都很好