react-native - 如何在切换到 react-navigation 之前预呈现组件？

Question

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

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

Answer 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>
  );
}