React-Native 之Android学习笔记（一）

前言

2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React / React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。

一、Android 环境搭建

React Native 的宗旨是，学习一次，就可以高效编写跨平台原生应用。

1.安装jdk

2.安装sdk
sdk下载比较慢的情况下，可以使用国内镜像翻墙下载，腾讯和阿里都有。

3.安装C++环境
在系统里面可以看下自己电脑的环境，有没有安装。
选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

4.安装Node.js与Git
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
可以设置镜像下载，速度会快点。建议设置npm镜像以加速后面的过程。
点击下载

设置全局使用指定的镜像命令：
打开git 命令行窗体，输入如下命令即可。

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

解决办法：使用yarn安装包文件。具体解释如下：
在windows环境下搭建react-native开发环境时，需要通过npm安装yarn（React Native的命令行工具（react-native-cli））。Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

通过以下命令安装yarn

npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源：
yarn configset registryhttps://registry.npm.taobao.org --global
yarn configset disturlhttps://npm.taobao.org/dist --global

安装完yarn之后就可以用yarn代替npm了，进入react-native项目中，使用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

5.安装React Native命令行工具
由于下载比较慢，可以在github中下载。
点击下载
下载完成之后，就可以去安装命令行工具了。
命令进入如下刚下载好的文件夹目录：

图1.jpg

输入如下命令安装：

npm install -g react-native-cli

运行完之后，所有的环境就已经搭建好了，之后就可以创建项目了。

6.项目创建
命令

react-native init Test1// Test1为项目名称，即新建了一个目录为Test1

图三.jpg

这样就已经创建好了一个项目。来看下目录结构

图四.jpg

上图就包含了Android 和ios 的文件目录。

7.在工程路径中，运行改项目。
命令:react-native start

图五.jpg

启动完成后，在浏览器中输入http://localhost:8081/index.android.bundle?platform=android 该地址，看是否已经完成。看看是否可以看到打包后的脚本

0.49版本后似乎已经统一入口了！就是index.js，你说的index.android.js和index.ios.js那都是老版本了，而且多看文档！不要老看旧的教程！

8.之后就可以准备模拟器或真机运行android

命令：react-native run-android

运行一个RN项目
1.第一步
npm install -g react-native-cli
2.安装
npm install
3.启动
react-native start
4.运行
react-native run-android

在环境搭建中可以能会遇到各种问题，场见中可以会有

（1）、sdk找不到，无法显示sdk路径

解决方案：查看环境变量是否配置正确

（2）、failed to find target with hash string 'android-23' in: F:\Android_SDK？

解决方案：更新23版本的sdk.

(3)、build运行到手机上时，看见一片红色,可能是没有连接服务器js server . 解决方案：可以摇一摇手机，弹出来的对话框中，点击设置端口好，和自己电脑环境的端口设置成8081。

第二种方法是，可以自己的手机连中电脑的代理，就不需要设置这些了，它就和你电脑端口环境试一致的。

(4) Packager can't listen on port 8081

解决：
1.修改监听借口，命令如 react-native
start --port=8088
2.找到占用端口的进程，删除查找命令如下：
netstat
-ano

tasklist|findstr
"2720" //2720 是PID

(5). React Native Navigator 引入的那些坑]

http://blog.csdn.net/gl_mine_csdn/article/details/73740868

(6).当我们进行执行react native 程序的时候告知我们该组件已经不存在

步骤如下：
1、打开程序的根目录（也就是和 Package.json 同级的目录）
2、使用cmd 命令工具或者 Git Bash Here (前提是安装过GIT工具) **
输入命令： npm install react-native-deprecated-custom-components --save
3、在使用Navigator的地方引用便可使用。**
引用方式：import {Navigator} from "react-native-deprecated-custom-components"
注意：在引用时一定在导入 Navigator的时候加上 {} 要不然会报错。
同时：当我在使用 npm install react-native-deprecated-custom-components --save 时报错
解决方法：
使用命令： npm i react-native-deprecated-custom-components --save
如果此方法还不能解决。
解决方法：
使用yarn命令（前提是自己有yarn的配置环境）
使用命令：yarn add react-native-deprecated-custom-components --save

更多的安装运行部起来的原因请参考如下资料：
http://www.cnblogs.com/tianxiangbing/p/react-native-setup.html