ReactNative学习过程

ReactNative学习过程

windeow 上搭建Android开发环境

1. 
   
2. ReactNative 3.2需要node.js 和 Python2、nmp、Android环境
   官网建议， 用Chocolatey（包管理工具）（https://chocolatey.org/install）来下载node.js 和 Python2
Chocolatey下载只要在Cmd.exe里输入命令
   @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"运行即可
   安装好Chocolatey，继续按照node.js 和 Python2
nodejs安装命令choco install nodejs.install
python2安装命令 choco install python2
nmp模块npm install -g react-native-cli
3. 下载Java和Android Studio
   

注：ANDROID_HOME　在window需要配置正确。

运行Demo应用

1. 继续在cmd.exe输入如下命令
   react-native init AwesomeProject

cd AwesomeProject

react-native start(浏览器运行)或者react-native run-android（android设备运行）
   
   

   执行react-native run-android时出现了错误
   

   :app:installDebug
   Installing APK ‘app-debug.apk’ on ‘MI 5 - 6.0.1’ for app:debug
   Unable to install C:\WorkSpace\ReactNativeSpace\AwesomeProject\android\app\build
   \outputs\apk\app-debug.apk
   com.android.ddmlib.InstallException: Failed to establish session
   at com.android.ddmlib.SplitApkInstaller.install(SplitApkInstaller.java:6
   6)
   at com.android.ddmlib.Device.installPackages(Device.java:901)
   at com.android.builder.testing.ConnectedDevice.installPackages(Connected
   Device.java:119)
   at com.android.build.gradle.internal.tasks.InstallVariantTask.install(In
   stallVariantTask.java:134)
   at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
   at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.
   java:62)
   at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAcces
   sorImpl.java:43)
   at java.lang.reflect.Method.invoke(Method.java:497)
   at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:75)
   at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskF
   actory$StandardTaskAction.doExecute(AnnotationProcessingTaskFactory.java:228)

原因应用没有设置是我的小米手机5手机开启了MIUI，关闭MIUI就不报错了（设置->更多设置->开发者模式->关闭启动MIUI优化）,也可以直接用Android Studio 导入该项目运行在真机上。
MIUI7以后出现问题
http://blog.csdn.net/eric_niezhangyu/article/details/51692297
http://blog.csdn.net/u011240877/article/details/51983262

如果WIFI和设备是同一个网络，现在需要改一下IP地址，在电脑通过cmd的ipconfig命令找到电脑的IP地址。

但是在Anroid真机运行时可能会遇到白屏的情况，解决办法打开应用的悬浮框权限http://blog.csdn.net/itpinpai/article/details/50845625。

但是运行在虚拟机上会报Could not get BatchedBridge, make sure your bundle is packaged correctly错误。
解决：在应用界面摇晃虚拟机（更多->虚拟传感器，摇动传感器），应用弹出选择界面,选择”Dev Settings” / “Debug server host & port for device”，地址是本机ip:端口号.
http://stackoverflow.com/questions/38942566/react-native-0-31-could-not-get-batchedbridge-error
http://blog.csdn.net/asmcvc/article/details/51683799

注：小米手机系统遇到问题：
1、执行命令react-native run-android没有允许安装的对话框，导致无法安装。
2、安装后应用白屏，AwesomeProject应用权限管理里面，打开悬浮窗权限。

写一个listview的例子

任务：自定义数据用ListView来显示内容。
打开AwesomeProject/index.android.js修改代码为

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView//需要的控件
} from 'react-native';

//模拟Json格式数据
var DATA=[
{
    "id":"1",
    "name":"meiling",
    "img":"http://g.hiphotos.baidu.com/image/h%3D200/sign=97c9d76f5a66d01661199928a72ad498/a08b87d6277f9e2fa91a49aa1730e924b899f361.jpg",
    "teacher":"xubh",
    "add_time":"2015-07-01",
    "url":"http://news.sohu.com/20160903/n467456407.shtml?t=1472858922838"
},
{
    "id":"2",
    "name":"wosho",
    "img":"http://g.hiphotos.baidu.com/image/h%3D200/sign=97c9d76f5a66d01661199928a72ad498/a08b87d6277f9e2fa91a49aa1730e924b899f361.jpg",
    "teacher":"xubh",
    "add_time":"2015-08-01",
    "url":"http://news.sohu.com/20160903/n467456407.shtml?t=1472858922838"
}];

class AwesomeProject extends Component {
  constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
dataSource: ds.cloneWithRows(DATA),
  };
}

 //渲染ListView
 render() {
 return (
  <View style={styles.container}>
      <ListView
      dataSource={this.state.dataSource}
      renderRow={this.item}/>
  </View>
  );
  }

//ListView的item布局
item(course) {
return (
  <View style={styles.container}>
    //图片组件加载图片的方法
    <Image source={{uri:course.img}} style={styles.images}/>    
    <Text style={styles.teacher}>
            {course.name}
    </Text>
    <Text style={styles.teacher}>
            {course.teacher}
    </Text>
    <Text style={styles.time}>
            {course.add_time}
    </Text>
  </View>
);
  }
}

//各个组件的样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 15,
    textAlign: 'left',
    color: '#333333',
    margin: 10,
  },
 teacher: {
  fontSize: 13,
  textAlign: 'left',
  color: '#525252',
  margin: 10,
  },
 time: {
  fontSize: 13,
  textAlign: 'left',
  color: '#2d85ca',
  margin: 10,
  },
 images: {
    height:300,
    margin:10
  },

});
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);