运行react native

环境搭建和运行

参照网上的教程安装一系列的工具，然后进入一个路径比如F盘，打开git命令行，输入：

react-native init projectname

会新建一个projectname的文件夹，之后进入该文件夹，在git中输入：

react-native start

等一会，显示下面提示说明服务起来了：

也可以点击下面链接看服务是否启动：
http://localhost:8081/index.android.bundle?platform=android
显示下面的内容：

运行模拟器。

然后在工程目录下再打开一个git（cmd命令行也可以），输入：

react-native run-android

首次运行要从网上下gradle，下载过程中能看到很多………，网络不好会等很久，我是用Lantern开代理才下载成功。

如果遇到说找不到sdk，在环境变量中添加ANDROID_HOME，value为sdk路径。

如果提示adb连不上，把sdk路径下的adb文件替换成可以运行的文件。

成功后模拟器上会显示欢迎界面：

环境搭建参考：
http://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

工程结构

在网上查了下开发reactnative的IDE，facebook推荐Atom + Nuclide，但看介绍说Nuclide会比较卡，而且在windows上不支持自动补全就放弃了，选择了Sublime Text，安装好后还要装一些插件，参考：http://blog.csdn.net/yayayaya20122012/article/details/51119801
打开工程文件夹：

因为是android模拟器，手机显示的内容在index.android.js中：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';export default class testproject extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.android.js        </Text>        <Text style={styles.instructions}>          Double tap R on your keyboard to reload,{'\n'}          Shake or press menu button for dev menu        </Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('testproject', () => testproject);

主要有三部分：import、class和样式。控件都在class里面，styles指定了每个控件对应的样式。
改动代码后不用像之前那样通过命令行运行，直接R+R就行了，比如我把Welcome to React Native!改一下：

Ctrl + s保存，然后回到模拟器中，双击R就刷新了：

环境搭建的确是费了很大劲，居然要翻墙才能跑起来，在中国搞互联网不容易啊。搞清楚了工程的结构，接下来的计划是写一个登录页面如下图：

争取早日完成！

---

分割线

---

这两天从github上下了好几个推荐的开源项目，都因为各种原因没有运行起，今天早上耐心弄了下终于在模拟器上运行起来了，记录下遇到的问题和解决办法。

先去下了个天气预报的程序：https://github.com/stage88/react-weather
git clone到本地，下载的文件夹名称是“react-weather”，后面启动js服务的时候会提示文件名非法，进入ios文件夹下：

把文件名改成ReactWeather，截图中是已经改过名字的了。
然后又把环境搭建详细步骤看了一遍，发现要安装python，在CMD里面直接输python-V可以查看版本，但我电脑上提示命令无效，于是把phthon安装目录加入到系统环境变量的path里面，退出CMD重新开一个CMD，phthon-V可以看到版本了。
npm设置代理：

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

然后进入工程文件夹，直接react-native start，就报错，提示要先运行npm install，那就先npm install，这个时候又报一大堆错，就看到最后一句，提示要以管理员权限运行CMD，点击开始->所有程序->附件，右键命令提示符，“以管理员身份运行”，然后CD到项目目录下,npm install，安装成功，然后react-native start就没问题了。服务起来后，再开一个cmd（不需要管理员权限，直接Shift+右键）,输入react-native run-android，又出错，提示sdk路径不存在，其实环境变量ANDROID_HOME已经加好了，解决办法是去其它工程里把andorid目录下的local.properties拷过来，local.properties里面指定了sdk路径：

sdk.dir=F\:\\Android\\sdk

也可以自己创建一个文件，把上面的内容拷进去。然后在CMD里再来一次react-native run-android，妈的终于build成功了。

不会自动运行，在模拟器里打开ReactWeather，运行效果：

---

分割线

下午又下了个demo：https://github.com/wwayne/react-native-nba-app，进入工程目录直接，先npm install，直接报了一大堆错，好多都是“语法错误”，还有.Net之类的错误提示信息，解决办法是到reactnative多个项目的那个目录位置打开git，如下图：

ReactNative是所有工程的根目录路径，打开git输入：

输入git clone https://github.com/facebook/react-native.git

从github下载最好开启代理，会下载一个react-native文件夹，git进入react-native，再进入react-native-cli：

cd react-native/react-native-cli

然后:

npm install -g

出现下面的提示表示安装成功:

然后再进入工程路径react-native start就可以了。

补充

刚才那个NBA的demo有问题，重新找了个：https://github.com/fangwei716/30-days-of-react-native
start后run-android报错“undefined is not an object(evaluating ‘ViewPropTypes.styles’)”，在工程相关的issues有解决办法：https://github.com/fangwei716/30-days-of-react-native/issues/52，说要改代码，但其实不需要，最后面有个办法，在工程目录下 输入：

npm install react-native-scrollable-tab-view@0.6.3

之后再看代码里会发现node_modules\react-native-scrollable-tab-view\DefaultTabBar文件里内容变了，没有报错的ViewPropTypes了，再运行就好了。