web-dev-qa-db-ja.com

FlatListでKeyboardAvoidingViewを使用する方法

各行内に入力を持つFlatListコンポーネントがあります。入力を選択すると、キーボードの上にスクロールアップします。

私のコード：

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は正しくレンダリングされますが、入力を選択してもスクロールアップしません

iosreact-nativereact-native-flatlist
9
theDC

あなたはreact-native-keyboard-aware-scroll-viewを使って試すことができます

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

それは、RNからの対応するコンポーネントと同じプロパティを受け入れるKeyboardAware [ScrollView、ListView、SectionView、FlatList]に付属しています。私はそれを使用し、それは私のために働いた。

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>

      )}
    />
  );
}
10
Rick Lam

たくさんの苦労の後、これは私にとってうまくいきました

これを試して：

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

プロパティ 'keyboardVerticalOffset'を削除するか、xyzの値を試してみてください。あなたのケースに合うより良い値を見つけてください。

5
iDevAmit

KeyboardAvoidingViewの代わりに、ライブラリ react-native-keyboard-spacer を使用してみてください。

インストール：

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>
5
Martin Konicek