我在我的react native应用程序中有一个抽屉导航器侧边栏,侧边栏中的一个选项将用户带到一个页面,其中一个WebView将加载一个网站。
WebView第一次工作正常,但是当我退出WebView并尝试通过侧边栏再次加载时,它根本不会加载。
控制台记录onLoadProgress中的nativeEvent第一次也可以工作,但之后就找不到日志了。
WebView在第一次之后就不再加载了。
const [modalVisible, setModalVisible] = useState(true);
`const navChange= (navState: any) => {
console.log(navState.nativeEvent)
if (navState.nativeEvent.url.includes('main-page')) {
setModalVisible(false);
navigation.navigate('MainPage');
}
};
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
>
<View style={styles.container}>
<View style={styles.body}>
<WebView
key={new Date().getTime()}
source={{ uri: 'https://my-website-port/my-website' }}
onLoadProgress={navChange}
javaScriptEnabled={true}
/>
</View>
</View>
</Modal>`
我试过使用密钥,以及互联网上更多的选项,但到目前为止没有一个有效。
我希望我的抽屉导航器中的WebView每次都能成功加载。
1条答案
按热度按时间tp5buhyn1#
我发现了这个问题,这是因为我的“modalVisible”状态在我退出WebView后被设置为false,即使在那之后它仍然是false(当页面呈现时它不会将自己设置为true)。只有当我的页面在抽屉导航/侧边栏中时才会发生这种情况。如果WebView在正常的堆栈导航中,它可以正常工作,“modalVisible”最初将始终设置为true。
所以我的解决方案是每次页面聚焦时将“modalVisible”设置为“true”,我将它放在现有代码的顶部,如下所示: