react-native – React Navigation缓存组件

发布时间：2020-12-15 20:30:26 所属栏目：百科来源：网络整理

导读：我对ReactNative很新,并且对以下内容有点困惑.我已经设置了StackNavigator,如图所示 const MyProjectNavigator = StackNavigator({ home: {screen: Other},latest_news: {screen: LatestNews}} 当我想要进入不同的屏幕导航时,我执行以下操作： navigate( lat

我对ReactNative很新,并且对以下内容有点困惑.我已经设置了StackNavigator,如图所示

const MyProjectNavigator = StackNavigator({
  home: {screen: Other},latest_news: {screen: LatestNews}
}

当我想要进入不同的屏幕导航时,我执行以下操作：

navigate(
      latest_news,{
        otherParams : param1
      }
    );

这到目前为止运作良好.

现在,假设latest_news组件在安装时从服务器查询大量数据,然后对该数据执行大量操作,按日期排序,作者,yadda yadda.这需要一些时间来完成.

您如何建议我加快速度？例如,在iOS上,我通常将我的ViewController保存在内存中,如果它可用,则显示它.使用navigate()时,导航器似乎创建了一个新的组件实例,从而重新加载并重新处理所有内容,使用户每次都等待.

* TL; DR

我希望保留我的组件在导航中查询和处理的所有数据,以便处理不必经常重复.
我可以把数据放在全局对象上,但听起来不是一个好的解决方案

谢谢一堆.

解决方法

您可以使用TabNavigator而不是StackNavigator.

TabNavigators重用其路由项的相同实例.

您可以禁用TabBar的可见性：

const TabNav = TabNavigator({
    Home: { screen: HomePage},NewsFeed1: { screen: NewsFeed},NewsFeed2: { screen: NewsFeed},NewsFeed3: { screen: NewsFeed},// ...
    },{
        navigationOptions: ({ navigation }) => ({
            tabBarVisible: false,}),});

然后你可以手动导航 – 例如使用按钮：

<Button title="NewsFeed1" onPress={() => this.props.navigation.navigate("NewsFeed1") }/>

看一个简单的例子：

https://github.com/chrisdie/AwesomeNavigation/blob/master/src/tabbar2/App.js

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!