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

React Navigation缓存组件

1 个答案: