如何将 KeyboardAvoidingView 与 FlatList 一起使用？答案

【问题标题】：How to use KeyboardAvoidingView with FlatList?如何将 KeyboardAvoidingView 与 FlatList 一起使用？
【发布时间】：2018-08-02 11:31:54
【问题描述】：

我有一个 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 不会使其向上滚动

【问题讨论】：

我刚刚用 SectionList 试了一下。填充调整并不完美，但它有效：imgur.com/a/MaioK 另请查看：medium.freecodecamp.org/… 如果仍然无效，请在 Snack 上分享一个完整示例：snack.expo.io/rk_YwDvuf 在您的示例中，很难说出 ds、ListFooterComponent 和ListItem 是。因此很难调试您的代码并回答问题。

标签： ios react-native react-native-flatlist

【解决方案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>

      )}
    />
  );
}

【讨论】：

如果你使用KeyboardAwareFlatList，外部的KeyboardAwareScrollView应该被移除，否则会出现奇怪的滚动行为。
这不是内存高效的列表，它会一直占用内存并导致内存不足
我想渲染一个列表并在它下面显示一个文本输入。

【解决方案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>

【讨论】：

像魅力一样工作

【解决方案3】：

试试这个：

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

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

【讨论】：

【解决方案4】：

适用于与我走相似道路的任何人。我无法使用 KeyboardAvoidingView，因为它依赖于与 Flatlist 冲突的 ScrollView。我无法在 Flatlist 中使用页眉和页脚选项，因为我在搜索选择框中将其用作生成的东西，因此必须包含它。

对我来说，Android 和 iOS 计算绝对位置的方式有所不同。 Android 认为底部是键盘的顶部，而 iOS 认为底部是键盘显示时的屏幕底部。

事实证明，在您想要保留在键盘上方的内容周围放置一个 View 并在 iOS 上动态设置它的高度并不难。如果 View 是 position: absolute 和 bottom: 0，这在 Android 上甚至都不是必需的，因为它会跟随键盘。

这从这里大量借用：https://stackoverflow.com/a/60682069/438322 感谢Kevin Amiranoff

这是一个使用钩子的基本示例。

function YourComponent(props){
  const onKeyboardWillShow = e => {
    setKeyboardHeight(e.endCoordinates.height);
  };

  const onKeyboardWillHide = () => {
    setKeyboardHeight(0);
  };

  useEffect(() => {
    // These listeners on ios are a little more snappy but not available on Android
    // If you want to use this on Android use keyboardDidShow/Hide
    if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', onKeyboardWillShow);
      Keyboard.addListener('keyboardWillHide', onKeyboardWillHide);
    }

    return () => {
      if (Platform.OS === 'ios') {
        Keyboard.removeListener('keyboardWillShow', onKeyboardWillShow);
        Keyboard.removeListener('keyboardWillHide', onKeyboardWillHide);
      }
    };
  }, []);

  const buttonHeight = 50;

  return(
    <View>
      <Content bla={'bla'}/>

      <View style={{
        height: Platform.OS === 'ios' 
          ? keyboardHeight + buttonHeight : buttonHeight, 
        position: 'absolute', 
        bottom: 0 
      }}>
      {/* Keep this button above the keyboard */}
      <Button style={{ height: buttonHeight }}/>
</View
    </View>
  )
}

【讨论】：