web-dev-qa-db-fra.com

FlatList ne défile pas

j'ai créé un écran sur lequel j'affiche un composant contenant une liste à plat. Pour une raison quelconque, je ne peux pas faire défiler la liste. Quelqu'un qui peut repérer mon erreur et me diriger dans la bonne direction?

fonction de rendu et style de mon fichier d'écran: 

render() {
return (
  <View style={styles.container}>
    <SearchBar />
    <ActivityList style={styles.list} data={this.state.data} />
  </View>
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});

fonction de rendu et style de mon composant listitem: 

export default class CardItem extends React.PureComponent {
render() {
return (
  <View style={styles.cardview}>
    <View style={styles.imagecontainer}>
      <Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      />
    </View>
    <View style={styles.cardinfo}>
      <Text style={styles.cardtitle}>{this.props.title}</Text>
      <View style={styles.cardtext}>
        <Text style={styles.textdate}>{this.props.date}</Text>
        <Text style={styles.texthour}>{this.props.hour}</Text>
      </View>
    </View>
  </View>
);
}
}

const styles = StyleSheet.create({
 cardview: {
  flex: 1,
  justifyContent: 'flex-start',
  backgroundColor: 'white',
  elevation: 3,
  maxHeight: 200,
  width: Dimensions.get('window').width - 20,
  margin: 1,
  marginTop: 10,
  borderRadius: 4,
},
imagecontainer: {
 flex: 7,
 height: 140,
 borderRadius: 4,
},
cardimage: {
 flex: 1,
 opacity: 0.8,
 height: 140,
 borderTopLeftRadius: 4,
 borderTopRightRadius: 4,
},
cardinfo: {
 flex: 2,
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
},
cardtitle: {
 flex: 1,
 fontSize: 16,
 fontWeight: 'bold',
},
cardtext: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
},
textdate: {
 color: '#5e5e71',
},
texthour: {
 color: '#5e5e71',
},
});

fonction de rendu et style de mon composant de liste: 

export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
  <FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  />
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});

mes données ont toutes un identifiant unique, titre, date, heure.

Lisez tous les guides et documents disponibles sans trouver de solution.

javascriptcssreactjsreact-nativereact-native-android
4
matthiasgoossens

Sortez le flex: 1 dans votre styles.cardcontainer, cela devrait vous permettre de faire défiler. La propriété FlatList/ScrollView contentContainerStyle englobe tous les composants enfants - que se trouve-t-elle "à l'intérieur" de la FlatList si vous voulez - et ne devrait jamais avoir une hauteur ou une valeur de flex définie. Si vous devez définir un flex: 1 pour la FlatList, utilisez plutôt style={{flex: 1}}. À votre santé!

13
swimisbell

Je rencontre également ce problème lorsque j'ajoute un outil d'image dans mon application de conversation et que j'ai trouvé une solution.

Ajoutez simplement TouchableWithoutFeedback pour couvrir chaque élément de la liste à plat. Etrange mais ça marche.

_renderCardItem = ({ item }) => (
<TouchableWithoutFeedback onPress={()=>{}}>
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
</TouchableWithoutFeedback>
);
1
Kyo Kurosagi