Question

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

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

Answer 1

我不知道在反应导航中有什么选项可以预加载未显示的屏幕，除非该屏幕是选项卡导航器的一部分。

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

例如，如果要从第二个屏幕中的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>
  );
}

切换到组件之前，如何在反应导航中预渲染组件？

1 个答案: