如何在切换到组件之前在 react-navigation 中预渲染组件？答案

【问题标题】：How to prerender a component in react-navigation before switching to it?如何在切换到组件之前在 react-navigation 中预渲染组件？
【发布时间】：2019-07-25 23:30:40
【问题描述】：

在我的 StackNavigator 中，其中一个组件包含加载时间较长的 Web 内容。但是，这个屏幕只会在我的导航流程的后期显示。在最终切换到组件之前，如何利用这段时间在后台渲染组件？

我在 React Native 中找不到任何可以与 ReactDOM.render 相媲美的东西，可以让我手动渲染它。

【问题讨论】：

您可以使用指示器创建加载屏幕
当然可以，但这不会影响等待时间
你找到解决这个问题的好方法了吗？我也面临同样的问题
不，如果您能够切换到 Cordova。与此同时，我意识到 react-native 和生态系统是多么荒谬。没有人关心真正的表现。

标签： react-native react-navigation

【解决方案1】：

我不知道 react-navigation 中有任何选项可以预加载未显示的屏幕，除非屏幕是选项卡导航器的一部分。

根据减慢渲染速度的原因，您也许可以在第一个屏幕中执行一些操作，然后使用导航参数将结果传递到第二个屏幕。

例如，如果您在第二个屏幕中从 api 获取数据，您可以在第一个屏幕中获取此数据并将其传递给第二个屏幕：

this.props.navigation.navigate('SecondScreen', { data: this.data });

如果它是一个组件，您也可以尝试在第一个屏幕中构建它并以相同的方式传递它：

this.props.navigation.navigate('SecondScreen', { component: this.component });

如果您在第二个屏幕中渲染 WebView，可以帮助在第一个屏幕中渲染 WebView，但没有宽度或高度。 WebView 不会显示，但会获取和缓存网站数据，使真实渲染更高效：

render() {
  return (
    <View>
      <WebView source={{ uri: 'https://github.com/facebook/react-native' }} style={{ height: 0, width: 0 }} />
      {this.renderCurrentScreen()}
    </View>
  );
}

【讨论】：