React Native - 使用FlatList在键盘弹出时滚动到底部

Question

<KeyboardAvoidingView style={{ flex: 1 }}>
  <FlatList
     // This keeps the keyboard up and disables the user's ability to hide it.
     keyboardShouldPersistTaps="handled"
     data={this.state.examples}
     keyExtractor={(item, index) => index.toString()}
     renderItem={this._renderItem}
     contentContainerStyle={{ flex: 1}}
  />
</KeyboardAvoidingView>

到目前为止，我已经达到了我想要的效果。然而，当键盘弹起时 - 它会隐藏FlatList渲染的底部部分项目。用户无法向上滚动并查看最后的项目，因为它们留在键盘后面。 如何保持键盘打开（并禁用被解除的能力），同时能够查看和滚动整个FlatList内容？

- Jinglu Zhou

Answer 1

我相信您正在iOS中遇到这个问题。对于使用flat list进行键盘处理，您可以尝试使用react-native-keyboard-aware-scroll-view。

您可以通过在keyboard-aware-scroll-view中添加此属性来保留键盘不关闭。

keyboardShouldPersistTaps={"handled"}

尝试在KeyboardAwareScrollView中使用此属性

请参考下面的代码片段

 <KeyboardAwareScrollView
            keyboardShouldPersistTaps={"handled"}
            extraScrollHeight={Platform.OS == "ios" ? hp("4%") : hp("0%")}
            extraHeight={Platform.OS == "ios" ? hp("9%") : 0}
            style={{ flex: 1, backgroundColor: "white" }}
            behavior={Platform.OS == "ios" ? "position" : null}
            resetScrollToCoords={{ x: 0, y: 0 }}
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            keyboardOpeningTime={1}
            enableOnAndroid={true}
            contentContainerStyle={{ flex: 1 }}
          >
       <View style = {{
          flex: 1,
          height: .. }}>
          <FlatList 
            ... />
      </View >

</KeyboardAwareScrollView>

如果您仍然遇到问题，请不要犹豫，回复我。

- Dhevendhiran M