如何在 WebView React Native 中注入 JavaScript

Question

我有不同类型的脚本需要通过应用程序中的 WebView 执行。我关注了许多其他相关帖子，但这些对我帮助不大。第一个执行正常。

setTimeout(function() {
 window.ReactNativeWebView.postMessage(JSON.stringify(${window.CartVue.carts}))
}, 2000);true;

对于第二个，有人可以帮我在 WebView 中执行下面的 JavaScript 代码吗？

async function extractItems(){
   const responsePromise = await fetch('https://www2.hm.com/tr_tr/v1/carts',
  {
    credentials: 'include'});
    const response = await responsePromise.json();
    return response;
  }
  await extractItems();

WebView

<WebView
  ref={webViewRef}
  source={{uri: webUrl}}
  onNavigationStateChange={webViewState => {
    // setWebUrl(webViewState?.url);
  }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  startInLoadingState={true}
  injectedJavaScript={jsCode}
  onLoadEnd={() => onLoadWebUrl()}
  renderLoading={() => <Loading visible />}
  onError={() => webViewRef.current.reload()}
  onMessage={event => {
    console.log("onMessage event ==> ",);
    if (cartUrl !== '') {
      onMessage(event);
    }
  }}
/>

Answer 1

经过努力，我找到了第二个脚本的解决方案。我将下面的代码用于运行的第二个脚本。希望对其他人有帮助。

  const jsCode = `setTimeout(() => {
    const extractCart = async () => {
      async function extractItems() {
        const responsePromise = await fetch('https://www2.hm.com/tr_tr/v1/carts', {
          credentials: 'include',
        });
        const response = await responsePromise.json();
        return response;
      }
      const res =  await extractItems();
      window.ReactNativeWebView.postMessage(JSON.stringify(res));
    };
    extractCart();
  }, 2000);`;

如何在 WebView React Native 中注入 JavaScript

How to inject JavaScript in WebView React Native

javascript

function

webview

react-native