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的值进行播放，只需检查哪个值更适合您的情况即可。

Answer 4

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

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

事实证明，只需在要保留在键盘上方的内容周围放置一个View，并在iOS上动态设置其高度，就没有那么困难。在Android上，甚至不需要，因为如果View是position: absolute和bottom: 0，它会紧随键盘。

这是从这里大量借用的：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>
  )
}

如何将KeyboardAvoidingView与FlatList一起使用？

4 个答案: