React Native -在WebView中设置localStorage
React Native -在WebView中设置localStorage
提问于 2019-03-09 21:55:04
我想在加载页面之前在WebView组件中设置localStorage。
https://facebook.github.io/react-native/docs/webview
我的用例是，我的RN应用程序想要在其附带的网站上打开一个页面。网站通过检查localStorage中的令牌在加载时进行身份验证。如果令牌不在那里，他们将被提示登录。由于用户已经登录了应用程序，我更希望他们可以避免再次登录WebView。
回答 2
Stack Overflow用户
发布于 2019-06-11 13:40:57
你可能已经克服了这个问题。如果不是，这里是我的解决方案。
您可以使用WebView的injectedJavaScript属性并添加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}并重新加载页面。
注意:我们需要将函数作为字符串传递给webview中的injectedJavaScript。
- 在WebView中使用
myInjectedJs。
<WebView
ref={webView => { this.refWeb = webView; }}
javaScriptEnabled={true}
injectedJavaScript={myInjectedJs}
...希望这能解决你的问题。
Stack Overflow用户
发布于 2020-12-01 19:12:59
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",
},
}适用于安卓和iOS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55078060
复制相关文章
相似问题
腾讯云开发者
