ReactNative Flatlist - 项目呈现的性能

时间:2017-09-13 17:56:19

标签: javascript performance react-native react-native-flatlist

我有这个源代码用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

0 个答案:

没有答案