React Native

我想React Native和React.js的区别就像奏鸣曲式和奏鸣曲。

前者是一种开发模式，后者是一个UI框架。

React Native用大白话说，就是从此一名程序员自己就可以创业了，他只用这一门技术，就可以同时写出 androidapp，ios app，以及后台应用程序，并且，请注意这里，它可以做到实时热更新，不用新发版本，只需在服务器改动一下代码即可。---- 引用自

Angular有专门为React Native做的 https://github.com/angular/react-native-renderer

其说明是用Angular 2 和React Native开发Android以及IOS应用。

开始使用React Native

http://reactnative.cn/docs/0.27/getting-started.html

http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html

在进行上面那些攻略或者跟着react的官方攻略开始之前，先完全更新node

1. 更新你已经安装的NPM库，这个很简单，只需要运行。

npm update –g

2. 更新Nodejs自身。一直依赖我都是下载最新版的源码，然后make install，及其繁琐。其实只需要运行以下2个命令即可：

npm install –g n
n latest

n可以下载任意版本的nodejs安装到本机，有一个进度条动画。

必要时sudo还是得加的。

西楼一个同事告诉我他node从来没更新成功过，建议我下载安装包傻瓜更新。

我这样npm之后版本号上上去了，虽然有很多权限报错，诸如：

cp: /usr/local/share/systemtap/tapset/node.stp: Permission denied

npm install -g react-native-cli // 全局安装react-native
npm install --save react-native // 本地安装react-native

react-native init AwesomeProject

进入project目录： react-native run-android

如果npm创建react-native项目的时候速度慢得吃键盘，可以用淘宝镜像：

1.通过config命令

npm config set registry https://registry.npm.taobao.org 
npm info underscore // 如果上面配置正确这个命令会有字符串response

2.命令行指定

npm --registry https://registry.npm.taobao.org info underscore

3.编辑~/.npmrc文件加入下面内容

registry = https://registry.npm.taobao.org

To run your app on iOS:
   cd /Users/narumi/HeminghsuProject
   react-native run-ios
   - or -
   Open /Users/narumi/HeminghsuProject/ios/HeminghsuProject.xcodeproj 
in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), 
or a device connected
   cd /Users/narumi/HeminghsuProject
   react-native run-android

 鉴于我之前为了节省空间卸掉了xcode，先用android来启动第一个应用吧~

 结果是滚了一大屏的...以后告诉我

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/narumi/HeminghsuProject/android/app/build.gradle' line: 104

* What went wrong:
A problem occurred evaluating project ':app'.
> SDK location not found. Define location with sdk.dir in the 
local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. 
Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 9 mins 0.742 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

怀疑watchman没有装好，因为一开始brew update就失败了，后来用npm装的。

为了解决brew update没反应的问题，找到镜像

d /usr/local
git remote set-url origin git://mirrors.ustc.edu.cn/homebrew.git

这样终于更新成功，继续 brew install watchman ，提示已经有安装，需要先 brew unlink watchman

然后再城市install就行了。

这样已经排查出两个依赖配置问题，都是由于brew被墙引起的，****以后成功更新。

最后一个也是最多人遇到的问题：找不到SDK

设$ANDROID_HOME和$SDK_HOME都没作用，stackoverflow上有人说Mac上设环境变量是没用的，必须要用local.properties

那我只有写写看，一般.properties文件的写法是路径不需要字符串的，紧跟在赋值=号后面。

尝试后发现此文件在工程android目录下才起作用，直接写相对路径，/代表根目录，如果加了../反而会变成绝对路径。

最后从找不到路径演变成

* What went wrong:

A problem occurred configuring project ':app'.

> failed to find target with hash string 'android-23' in: /adt/sdk

继续stackoverflow，人家说是build.gradle中classpath与SDK中安装的安卓版本不对应，也就是我没有装23版，查看了一下SDKmanager，确实是没有这个版本，所以尝试classpath1.3.1改到1.3.0

dependencies {
classpath 'com.android.tools.build:gradle:1.3.0'
//classpath 'com.android.tools.build:gradle:2.0.0-beta2' // or beta3
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}

改成1.3.1之后它又下载了很多依赖，好像log还看到去取24版安卓，但是最后还是失败了。然后我又改了1.0.0，当然再次装了一堆依赖，仍然提示 Could not find com.android.support:appcompat-v7:23.0.1

只好灰溜溜去装23.0.1，装完还是不行。。。。。。。。。。。

又清缓存  ~/.gradle/caches

rm -r 完SDK的问题没了，跟我说

build file '/Users/narumi/HeminghsuProject/android/app/build.gradle': 3: unable to resolve class com.android.build.OutputFile

真无语