FlatList 不在 Android 模拟器上滚动答案

【问题标题】：FlatList not scrolling on Android emulatorFlatList 不在 Android 模拟器上滚动
【发布时间】：2019-02-17 18:16:30
【问题描述】：

我是本机反应的新手，在阅读教程时，我被 FlatList 的滚动卡住了。在具有相同代码的教程中，我可以看到列表正在滚动。我正在使用安卓模拟器。

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

【问题讨论】：

能否提供运行代码：snack.expo.io？ ListItem 没有 library 属性。

标签： android react-native redux

【解决方案1】：

尝试用空的View 包裹您的FlatList，其中flex 是1。

所以你的渲染方法代码会像下面的代码：

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

希望这会对你有所帮助。

【讨论】：

尝试将 flex 应用于 FlatList 本身。

【解决方案2】：

试试这个代码块（例如，改变这个自己的代码）

 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

干得好。

【讨论】：