React Native - 在 WebView 中设置 localStorage答案

【问题标题】：React Native - Set localStorage in WebViewReact Native - 在 WebView 中设置 localStorage
【发布时间】：2020-12-01 19:12:59
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-native local-storage

【解决方案1】：

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

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

示例代码 sn-p.

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

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

在 WebView 中使用 myInjectedJs。

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

希望这能解决您的问题。

【讨论】：

这将在调试中起作用，但是当我生成不起作用的发布版本时。
是否可以做一个 async 和 await 函数先加载令牌然后插入？

【解决方案2】：

injectedJavaScript 和 window.ReactNativeWebView.postMessage 应该可以完成这项工作。

import { WebView } from 'react-native-webview';

const INJECTED_JAVASCRIPT = `(function() {
  const tokenLocalStorage = window.localStorage.getItem('token');
  window.ReactNativeWebView.postMessage(tokenLocalStorage);
})();`;

export default function App() {
  const onMessage = (payload) => {
    console.log('payload', payload);
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <WebView
        source={{ uri: 'https://somewebsite.com/login' }}
        injectedJavaScript={INJECTED_JAVASCRIPT}
        onMessage={onMessage}
      />
    </View>
  );
}

有效载荷数据：

Object {
  "nativeEvent": Object {
    "canGoBack": true,
    "canGoForward": false,
    "data": "your_localstorage_value",
    "loading": false,
    "target": 3,
    "title": "Coil",
    "url": "https://somewebsite.com/home",
  },
}

适用于 Android 和 iOS。

【讨论】：