3

我有这个源代码可以用 reactNative 渲染我的 Flatlist：

render() {
         const {navigate} = this.props.navigation;
        return (
            <View >
                    <FlatList
                        extraData={this.state.searchResult.contacts}
                        data={this.state.searchResult.contacts}
                        keyExtractor={item => item.id}
                        ListHeaderComponent={this.renderHeader(this.state.selected)}
                        initialListSize={8}
                        initialNumToRender={20}
                        pagingEnabled={true}
                        pageSize={8}
                        scrollRenderAheadDistanc={470}
                        //removeClippedSubviews={true}
                        renderItem={({item}) => (
                            <MyListItem key={item.key}
                                        item={item}
                                        navigate={navigate}/>
                        )}
                    />
            </View >
        );
    }
}

class MyListItem extends React.PureComponent {
    render() {
        const item = this.props.item;
        return (<ListItem
            key={item.id}
            title={`${item.Name}`}
            subtitle={`${item.Adresse}`}
            onPress={() => {
                this.props.navigate('ContactDetail',
                    {
                        contact: item,
                    }
                )
            }}
        />);
    }
}

我有大约 950 个联系人要列出。如果我更改为联系人屏幕，则在滚动条消失之前，我无法单击任何 ListItems。..滚动条消失了，如果所有项目都已加载。

请看看这个视频......在这里你明白我的意思：

http://screencast-o-matic.com/watch/cbQIbkIoT3

4

0 回答 0