如何将KeyboardAvoidingView与FlatList一起使用？

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正确呈现,但选择一个输入不会使其向上滚动

Answer 1

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

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

它附带KeyboardAware [ScrollView,ListView,SectionView,FlatList],它接受与RN相应组件相同的道具.我用过它,它对我有用.

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>

      )}
    />
  );
}

Answer 2

您可以尝试使用库react-native-keyboard-spacer替代KeyboardAvoidingView。

安装：

npm install --save react-native-keyboard-spacer

像这样使用它：

import KeyboardSpacer from 'react-native-keyboard-spacer'

...

<View style={{flex: 1}}>
  <FlatList
    style={{flex: 1}}
    data={ds}
    renderItem={({ item }) => <ListItem data={item} />}
  />

  {/* The view that will expand to match the keyboard height */}
  <KeyboardSpacer />
</View>

Answer 3

经过很多努力，这对我有用。

尝试这个：

<KeyboardAvoidingView behavior='position' keyboardVerticalOffset={xyz}  >

您可以删除属性“ keyboardVerticalOffset”或使用xyz的值，只是找出适合您情况的更好的值。