我正在使用 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 立即开始加载,而不仅仅是在可见时。
最佳答案
有同样的问题,我对此进行了更多研究:
问题在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
,有时需要它。
关于javascript - react-native-webview 只有在 react-navigation tabNavigator 中的事件选项卡上时才开始加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56923273/