Question

我正在尝试从本机使用KeyboardAvoidingView组件，但似乎没有任何作用。这是我的代码：

    <Container>
      <Header navigation={this.props.navigation} title="Header" />
      <View style={{height: pageHeight}}>
        <KeyboardAvoidingView style={{flex: 1,}} behaviour="padding" enabled>
          <ScrollView style={{
            flex: 1,
            borderColor: '#F00',
            borderWidth: 2,
          }} keyboardShouldPersistTaps="always">
            <InputWithLabel label="Item 1" editable={true} />
            <InputWithLabel label="Item 2" editable={true} />
            <InputWithLabel label="Item 3" editable={true} />
            <InputWithLabel label="Item 4" editable={true} />
            <InputWithLabel label="Item 5" editable={true} />
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    </Container>

这是结果when the keybaord is closed和when the keyboard is open on the 5th item。如您所见，没有任何反应，该视图几乎没有移动。奇怪的是，我可以在KeyboardAvoidingView上添加paddingBottom，它可以正常工作，并且可以mimic the expected result。

我的代码中缺少什么吗？

Answer 1

您可以在代码中使用KeyboardAvoidingView或Scrollview。两者都不是。

转到您的AndroidManifest.xml文件，该文件位于以下路径/android/app/src/main/AndroidManifest.xml中的项目文件夹中

找到行 android：windowSoftInputMode 并将其值更改为 adjustPan 。

因此，当您点击项目＃5时，视图将在键盘上方。

Answer 2

您可以在没有KeyboardAvoidingView的情况下尝试类似的操作来在打开键盘的同时移动屏幕

<Container>
    <Header navigation={this.props.navigation} title="Header" />
    <ScrollView keyboardShouldPersistTaps="always">
        <View style={{height: pageHeight, flex: 1,  borderColor: '#F00', borderWidth: 2,}}>
            <InputWithLabel label="Item 1" editable={true} />
            <InputWithLabel label="Item 2" editable={true} />
            <InputWithLabel label="Item 3" editable={true} />
            <InputWithLabel label="Item 4" editable={true} />
            <InputWithLabel label="Item 5" editable={true} />
        </View>
    </ScrollView>
</Container>

KeyboardAvoidingView什么也不做

2 个答案: