React Native - 在 WebView 中设置 localStorage

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

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

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

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

您可以使用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}并重新加载页面。

注意：我们需要将函数作为字符串传递给injectedJavaScript在网络视图中。

2. Using myInjectedJs在 Web 视图中。

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

希望这能解决您的问题。