Question

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

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

我的用例是我的RN应用想要在其随附网站上打开一个页面。该网站通过检查localStorage中的令牌来在加载时进行身份验证。如果令牌不存在，将提示他们登录。好像用户已经登录了该应用程序一样，如果他们可以避免再次登录WebView，则希望这样做。

Answer 1

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

您可以使用injectedJavaScript的{{1}}属性并添加JavaScript代码以在页面加载时添加令牌。

示例代码段。

我需要注入的我的自定义Javascript代码。

WebView

代码说明

函数在加载后立即被调用。检查是否已设置 tokenKey 。如果未设置，则将其设置为新令牌let myInjectedJs = `(function(){ let tk = window.localStorage.getItem('tokenKey'); if(!tk || (tk && tk != '${token}')){ window.localStorage.setItem('tokenKey', '${token}'); window.location.reload(); } })();`;并重新加载页面。

注意：我们需要将函数作为字符串传递给Web视图中的${token}。

在WebView中使用injectedJavaScript。

myInjectedJs

希望这可以解决您的问题。

Answer 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上均可使用。

React Native-在WebView中设置localStorage

2 个答案: