如何在FlatList中使用KeyboardAvoidingView?

问题描述

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

I have a FlatList component with an Input inside each row. When I select the input I want it to scroll up above the keyboard.

我的代码:

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都可以正确呈现，但是选择输入并不能使其向上滚动

In this scenario, the FlatList is never loaded. When I delete flex:1 from both components, FlatList renders properly but selecting an Input does not make it scroll up

推荐答案

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

You can trying using react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-键盘感知滚动视图

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

It comes with KeyboardAware[ScrollView, ListView, SectionView, FlatList] which accepts the same props as their corresponding components from RN. I have used that and it worked for me.

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>

      )}
    />
  );
}

这篇关于如何在FlatList中使用KeyboardAvoidingView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！