Question

所以我使用了react-native-elements tabs和tab组件react native elements tabs，我还使用了其他标签组件，例如TabBarIOS和{{3 }}

我基本上有两个组件，人员和Feed，两者都有FlatList。以下是我使用选项卡中的组件的一些代码。

<Tabs>
                <Tab
                    selected={this.state.selectedTab === 'people'}
                    title={this.state.selectedTab === 'people' ? 'PEOPLE' : null}
                    renderIcon={() => <Icon containerStyle={{ justifyContent: 'center', alignItems: 'center', marginTop: 12 }} color={'#5e6977'} name='whatshot' size={33} />}
                    renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
                    onPress={() => this.tabChanged('people')}>
                    <People />
                </Tab>
                <Tab
                    selected={this.state.selectedTab === 'feed'}
                    title={this.state.selectedTab === 'feed' ? 'FEED' : null}
                    renderIcon={() => <Icon containerStyle={{ justifyContent: 'center', alignItems: 'center', marginTop: 12 }} color={'#5e6977'} name='person' size={33} />}
                    renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
                    onPress={() => this.tabChanged('feed')}>
                    <Feed />
                </Tab>
            </Tabs>

People和Feed组件都在使用FlatList组件。由于FlatList中的项目导致我在这些选项卡之间导航时速度非常慢，列表越大，导航速度越慢，有时需要大约2秒才能转到其他选项卡

我确定这是因为FlatList，因为当我删除FlatList时，一切正常。如果我使用ListView，那就是同样的问题。

这是People组件的渲染方法的代码示例。

renderProfileRowItem(profile) {
        return (
            <Profile key={profile.id} profile={profile} />
        )
    }

    render() {
        return (
            <View style={Style.container}>
                <StatusBar barStyle="default" />

                <FlatList
                    data={this.state.profiles}
                    ItemSeparatorComponent={() => <View style={Style.separator} />}
                    keyExtractor={profile => profile.id}
                    renderItem={({ item }) => this.renderProfileRowItem(item)}
                />

            </View>
        )
    }

我使用的是本机版本0.46.1。

side note:如果有帮助，我会使用redux

React native选项卡：使用FlatList或ListView时，在选项卡之间导航的速度非常慢

0 个答案: