reactjs - React Native - 在 WebView 中设置 localStorage

Question

我想在加载页面之前在 WebView 组件中设置 localStorage。

https://facebook.github.io/react-native/docs/webview

我的用例是我的 RN 应用程序想要在其附带的网站上打开一个页面。网站通过检查 localStorage 中的 token 来在加载时进行身份验证。如果 token 不存在，系统将提示他们登录。由于用户已经登录了该应用程序，如果他们可以避免在 WebView 中再次登录，我会更喜欢它。

Answer 1

您可能已经解决了这个问题。如果没有，这是我的解决方案。

您可以使用 WebView 的 injectedJavaScript 属性并添加 JavaScript 代码以在页面加载时添加 token 。

示例代码片段。

1. 我需要注入(inject)的自定义 Javascript 代码。

let myInjectedJs = `(function(){ let tk = window.localStorage.getItem('tokenKey');
      if(!tk || (tk && tk != '${token}')){
        window.localStorage.setItem('tokenKey', '${token}');
        window.location.reload();
      }
    })();`;

代码说明

函数在加载后立即被调用。检查tokenKey是否已设置。如果未设置，我们会将其设置为新 token ${token} 并重新加载页面。

注意:我们需要将函数作为字符串传递给 webview 中的 injectedJavaScript。

在 WebView 中使用 myInjectedJs。

<WebView
    ref={webView => { this.refWeb = webView; }}
    javaScriptEnabled={true}
    injectedJavaScript={myInjectedJs}
    ...

希望这能解决您的问题。