web-dev-qa-db-fra.com

Comment utiliser KeyboardAvoidingView avec FlatList?

J'ai un composant FlatList avec une entrée à l'intérieur de chaque ligne. Lorsque je sélectionne l'entrée, je souhaite qu'elle défile au-dessus du clavier.

Mon code:

return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >
    <FlatList
      style={{ flex: 1, backgroundColor: '#fff' }}
      data={ds}
      renderItem={({ item }) => <ListItem data={item} />}
      ListFooterComponent={this.renderButton}
    />
  </KeyboardAvoidingView>
);

Dans ce scénario, la FlatList n'est jamais chargée. Lorsque je supprime flex:1 des deux composants, FlatList est correctement rendu, mais le fait de sélectionner une entrée ne le fait pas défiler vers le haut.

iosreact-nativereact-native-flatlist
5
DCDC

Vous pouvez essayer d'utiliser react-native-keyboard-aware-aware-view

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

Il est livré avec KeyboardAware [ScrollView, ListView, SectionView, FlatList] qui accepte les mêmes accessoires que leurs composants correspondants provenant de RN. J'ai utilisé cela et cela a fonctionné pour moi.

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>

      )}
    />
  );
}
6
Rick Lam

Après beaucoup de lutte, cela a fonctionné pour moi.  

Essaye ça:

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

Vous pouvez supprimer la propriété 'keyboardVerticalOffset' ou jouer avec la valeur de xyz, En vérifiant simplement quelle valeur correspond le mieux à votre cas.

3
iDevAmit

Vous pouvez essayer d’utiliser la bibliothèque react-native-keyboard-spacer au lieu de KeyboardAvoidingView.

Installer:

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

Utilisez-le comme ceci:

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