React Navigation缓存组件

Question

我对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

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

谢谢一堆.

Answer 1

您可以使用 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