FlatList не прокручивается на эмуляторе Android

Я новичок в том, чтобы реагировать на нативные, и, просматривая учебник, я застрял с прокруткой FlatList. В учебнике с тем же кодом я вижу, что список прокручивается. Я использую эмулятор Android.

class LibraryList extends Component {


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

    render() {
        console.info(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);

не могли бы вы предоставить рабочий код: закуска.expo.io? ListItem не имеет реквизита library.

— 18.02.2019 03:23

android react-native redux

17.02.2019 19:16

Коллекции (ArrayList , HashSet , HashMap)

1 748

Ответы 2

Попробуйте обернуть FlatList пустым View, имеющим flex, есть 1.

Таким образом, ваш код метода рендеринга будет выглядеть следующим образом:

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

Надеюсь, что это поможет вам.

Попробуйте применить flex к самому FlatList.

— 17.02.2019 20:04

17.02.2019 19:56

Попробуйте этот блок кода (например, измените этот собственный код)

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

Полный код: https://github.com/VB10/Nativer/blob/master/src/view/tab/school/index.tsx

И посмотрите на https://facebook.github.io/react-native/docs/flatlist и :) окончательное решение использует компонент списка нативной базы, я думаю, именно решение https://docs.nativebase.io/Components.html#list-def-headref

Хорошая работа.

17.02.2019 20:35