我想在加载页面之前在 WebView 组件中设置 localStorage。
https://facebook.github.io/react-native/docs/webview
我的用例是我的 RN 应用程序想在它的随附网站上打开一个页面。该网站通过在 localStorage 中检查令牌来在加载时进行身份验证。如果令牌不存在，他们将被提示登录。看到用户已经登录了应用程序，如果他们可以避免再次登录 WebView，我会更喜欢它。
React Native - 在 WebView 中设置 localStorage
IT技术
reactjs
react-native
local-storage
2021-05-11 07:39:45
2个回答
你可能已经克服了这个问题。如果不是这里是我的解决方案。
您可以使用injectedJavaScript属性WebView并添加 javascript 代码在页面加载时添加令牌。
示例代码片段。
- 我需要注入的自定义 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。
myInjectedJs在 WebView 中使用。
<WebView
ref={webView => { this.refWeb = webView; }}
javaScriptEnabled={true}
injectedJavaScript={myInjectedJs}
...
希望这能解决您的问题。
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。