ios - 如何在 FlatList 中使用 KeyboardAvoidingView？

Question

我有一个 FlatList 组件，每行内都有一个 Input。当我选择输入时，我希望它在键盘上方向上滚动。

我的代码:

return (
  <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >
    <FlatList
      style={{ flex: 1, backgroundColor: '#fff' }}
      data={ds}
      renderItem={({ item }) => <ListItem data={item} />}
      ListFooterComponent={this.renderButton}
    />
  </KeyboardAvoidingView>
);

在这种情况下，永远不会加载 FlatList。当我从两个组件中删除 flex:1 时，FlatList 会正确呈现，但选择 Input 不会使其向上滚动

Answer 1

你可以尝试使用 react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-keyboard-aware-scroll-view

它带有 KeyboardAware[ScrollView、ListView、SectionView、FlatList]，它接受与 RN 相应组件相同的 Prop 。我用过它并且对我有用。

render() {
  return (
  <KeyboardAwareFlatList
      style={{flex: 1}}
      data={this.state.data}
      renderItem={({item}) => (
        <View style={{flex: 1}}>
        <Image
          source={item.v}
          style={{height:200, width: 200}}
        />
        <TextInput
          placeholder="enter text1"
        />
        </View>

      )}
    />
  );
}