如何在react-native-webview重新加载时重新注入JavaScript ?

Question

为了正常工作，我们需要将某些功能注入到我们集成在React Native应用程序中的webview中。如果webview重新加载，javascript需要相应地重新注入。这怎么可能呢?

javascript应该被注入到webview中，而不仅仅是在webview重新加载之前。

Answer 1

主要思想是使用injectJavaScript

const App = () => {
const webViewRef = React.useRef<WebView>(null);
const reloadsCount = React.useRef<number>(0);
const onLoadInjected = `
window.addEventListener('load', (event) => {
window.ReactNativeWebView.postMessage('InjectNewCode');
});
`;
const injectNewJsCode = () => {
webViewRef.current?.injectJavaScript(`alert('new code injected')`)
reloadsCount.current++
}
return (
<WebView
ref={ webViewRef }
pullToRefreshEnabled={ true }
source={{
uri: 'https://stackoverflow.com/questions/74386954/how-to-reinject-javascript-when-a-react-native-webview-reloads',
}}
onMessage={ ({ nativeEvent }) => {
if (nativeEvent.data === 'InjectNewCode') {
// skip the inital load event
if (reloadsCount.current > 0) {
injectNewJsCode()
}
reloadsCount.current++
}
}}
injectedJavaScript={ onLoadInjected }
/>
);
};