RN 实现简易浏览器

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  TextInput,
  WebView
} from 'react-native';
var {width,height} =Dimensions.get('window')
export default class demo extends Component {
  constructor(props){
    super(props);
    this.state={
      source:{
        uri:"https://www.baidu.com"
      },
      status:"NO page Loaded",
      backBuutonEnabled:false,
      forwardButtonEnabled:false,
    }
    this.inputURL="";
    this.goBack=this.goBack.bind(this);
    this.goForward=this.goForward.bind(this);
    this.goButton=this.goButton.bind(this);
    this.stateChange=this.stateChange.bind(this);
    this.onMessage=this.onMessage.bind(this)
  }
  onMessage(data){
    console.log("网页的数据");
  }
  stateChange(navState){
    console.log("网页路由数据");
    console.log(navState);
    this.setState({
      backBuutonEnabled:navState.canGoBack,
      forwardButtonEnabled:navState.canGoForward,
      status:navState.title,
    })
  }
  goBack(){
    //让webView组件退回
    this.refs.webViewRef.goBack();
  }
  //网页前进
  goForward(){
    this.refs.webViewRef.goForward();
  }
  //searh
  goButton(){
    console.log(this.inputURL.toLowerCase());
    //在input和Go都调用这个方法
    let uri=this.inputURL.toLowerCase();
    if(uri==this.state.source.uri){
      //当网页和当前的网址相同时候 重载网址
      this.refs.webViewRef.reload();
      console.log("zhogzao");
    }else{
      console.log("加载新网页");
      let source={};
      source.uri=uri;
      this.setState({
        source
      })
    }

  }
  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <View style={styles.addressBarRow}>
          <TouchableOpacity
            onPress={this.goBack}
            style={this.state.backBuutonEnabled?styles.navButton:styles.disableButton}>
            <Text>{'<'}</Text>
          </TouchableOpacity>
          <TouchableOpacity
              onPress={this.goForward}
            style={this.state.forwardButtonEnabled?styles.navButton:styles.disableButton}>
            <Text>{'>'}</Text>
          </TouchableOpacity>
          <TextInput ref="urlInputRef"
          autoCapitalize="none"
          style={styles.addressInput}
          defaultValue={this.state.url}
          onSubmitEditing={this.goButton}
          onChangeText={(newText)=>this.inputURL=newText}
          clearButtonMode='while-editing'
          />
          <TouchableOpacity
            onPress={this.goButton}
            style={styles.goButton}>
            <Text>Go!</Text>
          </TouchableOpacity>
        </View>
        <WebView
          ref="webViewRef"
          style={styles.webView}
          source={this.state.source}
          javaScriptEnabled={true}
          // 仅限Android平台。指定是否开启DOM本地存储
          domStorageEnabled={true}
          //网页导航 返回的是一些参数对象
          onNavigationStateChange={this.stateChange}
          // 强制WebView在第一次加载时先显示loading视图。默认为true
          startInLoadingState={true}
          //在网页端注入函数 这里得到返回的数据 从而达到RN和网页端的数据的交换
          // onMessage={this.onMessage}
        />
        <View style={styles.statusBar}>
          <Text style={styles.statusBarText}>{this.state.status}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  addressBarRow:{
    flexDirection:'row',
    padding:8,
  },
  navButton:{
    width:20,
    padding:3,
    marginRight:20,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'#fff',
    borderColor:'transparent',
    borderRadius:3
  },
  disableButton:{
    width:20,
    padding:3,
    marginRight:20,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'grey',
    borderColor:'transparent',
    borderRadius:3
  },
  addressInput:{
    backgroundColor:'#fff',
    borderColor:'transparent',
    borderRadius:3,
    height:24,
    paddingLeft:10,
    paddingTop:3,paddingBottom:3,
    flex:1,
    fontSize:14,
  },
  goButton:{
    height:24,
    padding:3,
    marginLeft:8,
    alignItems:'center',
    justifyContent:'center',
    borderColor:'transparent',
    borderRadius:3,
    alignSelf:'stretch'
  },
  webView:{
    backgroundColor:'#fff',
    height:350
  },
  statusBar:{
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:5,
    height:22
  },
  statusBarText:{
    color:'#fff',
    fontSize:13
  }
});

AppRegistry.registerComponent('demo', () => demo);