时间戳

首页 > 解决方案 > 来自 localStorage 的 react-native-webview getItem()

reactjs - 来自 localStorage 的 react-native-webview getItem()

问题描述

在我的 react-native 应用程序中，我通过 react-native-webview 使用 webview。在此，我需要从 localStorage 中获取一个项目。我用注入的JavaScript = {myInjectedJs} 尝试过，但我没有得到任何回报。

我究竟做错了什么？

选项卡.tsx

export default function TabEnergy({navigation} : {navigation: any}) {

  return <WebView 
  source={{ uri: DevUrls.BASE_URL_DEV }} 
  javaScriptEnabled={true}
  domStorageEnabled={true}
  injectedJavaScript={myInjectedJs}
  />;
}

let myInjectedJs = `(function(){
  ${`console.log('**', window.localStorage.getItem('authenticationObject')) `}
})();`

标签： reactjsreact-native

解决方案

您需要将onMessage={e => console.log(e.nativeEvent.data))道具添加到WebView组件。并通过调用将该信息发布回 ReactNativewindow.ReactNativeWebView.postMessage()

export default function TabEnergy({navigation} : {navigation: any}) {
  const webviewRef = useRef();

  const onSomeEvent = () => {
    webviewRef.current.injectJavaScript(
      `(function(){
         window.ReactNativeWebView.postMessage(window.localStorage.getItem('authenticationObject'))
      })();`
    )
  }


  return (
    <WebView 
      ref={webviewRef}
      source={{ uri: DevUrls.BASE_URL_DEV }} 
      javaScriptEnabled={true}
      domStorageEnabled={true}
      injectedJavaScript={myInjectedJs}
      onMessage={e => console.log(e.nativeEvent.data))
    />
  );
}

let myInjectedJs = `(function(){
  window.ReactNativeWebView.postMessage(window.localStorage.getItem('authenticationObject'))
})();`

推荐阅读