wake-up-neo.com

FlatList scrollt nicht

ich habe einen Bildschirm erstellt, auf dem eine Komponente angezeigt wird, die eine FlatList enthält. Aus irgendeinem Grund kann ich nicht durch die Liste blättern. Jemand, der meinen Fehler erkennen und mich in die richtige Richtung weisen kann?

Rendern-Funktion und Stil aus meiner Bildschirmdatei:

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',
 },
});

Rendern von Funktion und Stil aus meiner Listitem-Komponente:

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',
},
});

Rendern von Funktion und Stil aus meiner Listenkomponente:

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,
 },
});

meine Datenelemente haben alle eine eindeutige ID, einen Titel, ein Datum und eine Stunde.

Lesen Sie alle verfügbaren Handbücher und Dokumente durch und finden Sie keine Lösung.

4

Nehmen Sie den flex: 1 in Ihrem styles.cardcontainer heraus, damit Sie scrollen können. Die FlatList/ScrollView-Variable contentContainerStyle umschließt alle untergeordneten Komponenten - was sich in der FlatList befindet, wenn Sie so wollen - und sollte niemals einen definierten Wert für Höhe oder Flex haben. Wenn Sie einen flex: 1 für die FlatList selbst festlegen müssen, verwenden Sie stattdessen style={{flex: 1}}. Prost!

13
swimisbell

Ich treffe dieses Problem auch, wenn ich ein Bildwerkzeug in meine Chat-App hinzufüge und eine Tricklösung gefunden habe.

Fügen Sie einfach TouchableWithoutFeedback hinzu, um jedes Element in der Flatlist abzudecken. Seltsam aber es funktioniert.

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