rn中webview的引入,使用

安装
yarn add react-native-webview 我的版本:7.4.3
使用:
<WebView
onLoadStart={() => {
console.log("当WebView刚开始加载时调用的函数")
}}
onNavigationStateChange={(e) => console.log(e)}//当导航状态发生变化的时候调用。
          //
startInLoadingState={true}
renderLoading={() => (<View><Text>加载中</Text></View>)}//loading效果

allowsInlineMediaPlayback={true}
javaScriptEnabled={true}//是否执行js代码
injectedJavaScript={}//插入的js代码,必须是字符串,

// source={{uri: 'file:///android_asset/detail.html'}} //本地的html代码需要放在安卓目录的静态文件下
source={{html:`<h1>啊啊啊</h1>`}}             //引入html字符串,以及网上https://www.baidu.com 
style={{flex: 1, marginTop: 20}} //样式
onMessage={(event) => {
console.log("html页面传过来的参数", event.nativeEvent.data)
}}
ref={webView => this.webView = webView}
/>

传递流程:
rn调用 this.webview.postMessage(message)--->injectedJavaScript='document.addEventListener('message', function(e) {其中e.data就是传过来的参数} '
h5的传递还没整出来;

猜你喜欢

转载自www.cnblogs.com/jingguorui/p/11727947.html