React Native Webview初探

1.安装nodejs

2.安装android模拟器运行环境，下载android studio ，更新package

3.配置环境变量（ADROID_HOME等）

4.安装天天模拟器

5.运行adb connect 127.0.0.1:8081

6.安装react-native运行环境  npm install react-native-cli -g

7.初始化react-native项目 react-native init demo

8.windows环境下，react-native run-android

9.红屏问题"Could not get BatchedBridge, make sure your bundle is packaged correctly"

cmd中运行 

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/

点击模拟器的震动按钮

修改为本地机器ip加上8081端口

5.修改index.android.js

 
import React, { Component } from 'react';  
import {  
    AppRegistry,
  StyleSheet,  
  View,  
  WebView,  
  Dimensions,  
} from 'react-native';  
  
const {width, height} = Dimensions.get('window');  
  
const url = "http://192.168.20.65:803/admin/index_iframe.html?username=&password=";  
export default class WebViewExample extends Component {  
  
  constructor(props) {  
    super(props);  
  }  
  
  render() {  
    return (  
      <View style={styles.container}>  
        <WebView  
          style={{width:width,height:height-20,backgroundColor:'gray'}}  
          source={{uri:url,method: 'GET'}}  
          javaScriptEnabled={true}  
          domStorageEnabled={true}  
          scalesPageToFit={false}  
          />  
      </View>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    backgroundColor: '#f2f2f2',  
    paddingTop:20,  
  },  
});  

AppRegistry.registerComponent('test', () => WebViewExample);

6.重新 react-native run-android

7.预览效果