Question

我正在使用lazy设置为false的{{3}}。对于屏幕，我渲染了bottomTabNavigator。之所以调用render函数，是因为我可以看到console.log，但是直到选项卡被激活，实际的Web视图才开始加载。我开始的标签会立即开始加载。

标签

const Tab = () => { 
    console.log('render') // this is being called right away

    return (<WebView 
             onLoadStart={() => console.log('on load start') // this is being called only when tab becomes active (clicking on it) }
             source={{uri:'linkgoes.here'}} />) 
}

导航器

  const TabNavigator = createBottomTabNavigator(
  {
    TabOne: {
      screen: Tab
    },
    TabTwo: {
      screen: Tab
    }
  },
  {
    initialRouteName: 'TabOne',
    lazy: false,
  }
)

这是在将react-navigation从1.x升级到3.x并将react-native和react-native-webview升级之后发生的。我希望webview立即开始加载，而不仅仅是在可见时加载。

Answer 1

遇到相同的问题，我对此进行了更多研究：

该问题未在Android上出现，因此来自iOS实现

看一下react-native-webview的本机代码，看来Webview正在用didMoveToWindow方法加载，而对window属性的检查为non nil，这导致仅在显示时加载的Web视图。

我认为这不能使用react-native来解决，因此我在react-native-webview软件包中提出了PR，以解决以下特定问题：https://github.com/react-native-community/react-native-webview/pull/813

要在合并之前使用它，请在您的package.json中使用：

"react-native-webview": "https://github.com/philippeauriach/react-native-webview#8b7015037d9c1329e4e65e1978e98c4897a928e6",

别忘了运行cd ios && pod install，有时它是必需的。

当在react-navigation选项卡中的active选项卡上时，react-native-webview仅开始加载

1 个答案: