2
votes

FlatList ne défile pas sur l'émulateur Android

Je suis nouveau pour réagir natif et en parcourant un tutoriel, je me suis retrouvé coincé avec le défilement de FlatList. Sur le tutoriel avec le même code, je peux voir que la liste défile. J'utilise l'émulateur Android.

class LibraryList extends Component {


    renderItem = ({ item }) => (
         <ListItem library={item} />
      );

    render() {
        console.log(this.props.libraries);
        return (

            <FlatList
                data={this.props.libraries}
                renderItem={this.renderItem}
                keyExtractor={library => library.id.toString()}
        />
        );
    }
}

const mapStateToProps = state => {
    return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList);

android react-native redux

1 commentaires

pourriez-vous fournir un code en cours d'exécution: snack.expo.io ? ListItem n'a pas d'accessoire library .

3 Réponses :

0
votes

Essayez d'encapsuler votre FlatList avec la View vide dont flex est 1 .

Donc, votre Le code de la méthode de rendu sera comme le code ci-dessous:

 render() {
        console.log(this.props.libraries);
        return (
          <View style={{flex:1}}>
            <FlatList
                data={this.props.libraries}
                renderItem={this.renderItem}
                keyExtractor={library => library.id.toString()}
              />
         </View>
        );
    }

J'espère que cela vous aidera.

1 commentaires

Essayez en appliquant flex à FlatList lui-même.

0
votes

Essayez ce bloc de code (exemple, modifiez ce code personnel)

 renderFlatList() {
    return (
      <FlatList
        data={this.props.database}
        ListHeaderComponent={() => this.renderAddFeedScool()}
        renderItem={({ item }) => this.renderItem(item)}
      />
    );
  }    
render() {
    return (
      <View style={_styles.container}>
        {this.props.database.length > 0 ? (
          this.renderFlatList()
        ) : (
          <Text>Loading</Text>
        )}
      </View>
    );
  }

Styles..
container: {
flex: 1,
},

Code complet: https://github.com/VB10/Nativer/blob/master/src/view/tab/school/index.tsx

Et regardez https://facebook.github.io/ react-native / docs / flatlist et :) la solution finale utilise le composant de liste de base natif, je pense exactement que la solution https: / /docs.nativebase.io/Components.html#list-def-headref

Bon travail.

0 commentaires

0
votes

Essayez d'ajouter une liste de matières grasses dans un scrollview

<View style={styles.lastplayedlist}>
          <ScrollView>
            <FlatList
              data={this.state.dataSource}
              renderItem={({ item }) => {

                const artist = item.artist === "" ? "" : ' by ' + item.artist;

                return <Text style={styles.flatListItems}>{item.title + artist}</Text>
              }
              }
              keyExtractor={(item, index) => index}
            />
          </ScrollView>
        </View>

0 commentaires