React Native - 在 WebView 中设置 localStorage

Question

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

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

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

Answer 1

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

您可以使用injectedJavaScript的属性WebView并添加 javascript 代码来在页面加载时添加令牌。

示例代码片段。

1. 我需要注入的自定义 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}并重新加载页面。

注意：我们需要将函数作为字符串传递到injectedJavaScriptwebview 中。

2. 在WebView中使用myInjectedJs。

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

希望这能解决您的问题。