react-native-webview 仅在 react-navigation tabNavigator 的活动选项卡上开始加载答案

【问题标题】：react-native-webview ONLY starts loading when on active tab in react-navigation tabNavigatorreact-native-webview 仅在 react-navigation tabNavigator 的活动选项卡上开始加载
【发布时间】：2019-11-17 06:45:00
【问题描述】：

我正在使用 bottomTabNavigator 并将 lazy 设置为 false。对于屏幕，我渲染了react-native-webview。正在调用渲染函数，因为我可以看到 console.log 但实际的 webview 直到选项卡变为活动状态才开始加载。我开始的标签会立即开始加载。

标签

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 立即开始加载，而不仅仅是在可见时。

【问题讨论】：

标签： javascript react-native react-navigation react-native-webview

【解决方案1】：

遇到同样的问题，我对此进行了深入研究：

问题在Android上没有出现，所以来自iOS实现

查看react-native-webview 的本机代码，似乎正在didMoveToWindow 方法中加载webview，并检查window 属性为非nil，这导致webview 仅在显示时加载.

我不认为使用 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，有时需要。

【讨论】：