最近公务缠身, 转做了产品所以很久没写博客, 今天补一期
- webview的基本介绍1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980import React, { Component } from 'react';import { View, Text, WebView, StyleSheet, BackHandler, TouchableHighlight, TouchableOpacity } from 'react-native';export default class Wb extends Component {constructor(props) {super(props);this.state = {backButtonEnabled:null};/*** 监听物理后退键 只支持android return true 会拦截后退*/BackHandler.addEventListener('hardwareBackPress', this.backAndroid)}backAndroid = () => {// 只有return false才会走物理后退if (this.state.backButtonEnabled) {// webview网页后退 但是app页面还是不变this.web.goBack();return true;} else {return false;}}onNavigationStateChange = (navState) => {// 尝试去打印该值console.log(navState);this.setState({// 是否能后退backButtonEnabled: navState.canGoBack,});}sendPostMessage = () => {console.log('send');setTimeout(() => {// 这个是往webview里面发送信息this.web.postMessage("Post message from react native")}, 1000)}// 该函数是来监听来自webview的postmessageonMessage(event) {console.log( "On Message", event.nativeEvent.data );}render() {let jsCode = `document.querySelector('#main').style.backgroundColor = 'red';`;//source={{uri: 'https://www.whatismybrowser.com/detect/is-javascript-enabled'}}return (<View style={{flex:1}}><TouchableOpacity><MyButton label="Press me!" /></TouchableOpacity><TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() => this.sendPostMessage()}><Text style={{color: 'white'}}>Send post message from react native</Text></TouchableHighlight><WebView ref={web => this.web = web}// 注意这个位置 在android里面 需要这样写静态html路径 同时先把静态资源放到 android/app/src/main/assets 目录下面source={{uri: 'file:///android_asset/pages/demo.html'}}javaScriptEnabled={true} startInLoadingState={true}renderLoading={() => (<View style={styles.indicator}></View>)}onLoadStart={() => {console.log('loadStart')}} onLoad={() => {console.log('loadFinish')}}onNavigationStateChange = {this.onNavigationStateChange} onMessage={this.onMessage}/></View>);}}1. renderLoading 这个是在嵌入到app的webview尚未加载完成的loading组件, 需要startInLoadingState设置为true2. javaScriptEnabled是否允许webview里面的js脚本执行, injectedJavaScript可以接受一个js脚本字符串, webview初始化玩就执行。3. onNavigationStateChange 是webview里面的html页面前进后退触发的事件。4. onShouldStartLoadWithRequest 这个属性支持ios 接受一个函数返回bool 如果是false 就会中断webview的加载 这个在项目里可能会有需求很有很多其他属性大家可以去官网查阅。
关于webview的source属性可以去参考官方文档, 我这里只会说比较重要的几个属性。
2.接下来是重头戏webview和native的通信
上述是嵌入到app的里面的webview
3.下面有几个需要注意
4.最后来一波福利
5.拓展
更多gen函数可以去看google上的博客, 这个算是对之前redux-saga的语法复习吧。。。