react-native - 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 的整个内容的同时保持打开的键盘(并禁用被解雇的能力)？

Answer 1

我相信您在 ios 中遇到了这个问题。对于平面列表的键盘处理，您可以尝试 react-native-keyboard-aware-scroll-view .
您可以通过使用键盘感知 ScrollView 添加此属性来防止键盘关闭。

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>

仍然面临问题，请不要犹豫，回复我。