React Native Webview只加载一次

neskvpey  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(207)

我在我的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每次都能成功加载。

tp5buhyn

tp5buhyn1#

我发现了这个问题,这是因为我的“modalVisible”状态在我退出WebView后被设置为false,即使在那之后它仍然是false(当页面呈现时它不会将自己设置为true)。只有当我的页面在抽屉导航/侧边栏中时才会发生这种情况。如果WebView在正常的堆栈导航中,它可以正常工作,“modalVisible”最初将始终设置为true。
所以我的解决方案是每次页面聚焦时将“modalVisible”设置为“true”,我将它放在现有代码的顶部,如下所示:

import { useIsFocused } from '@react-navigation/native';
const isFocused = useIsFocused();

    useEffect(() => {
        if (isFocused) {
            setModalVisible(true);
        } 
    }, [isFocused]);

相关问题