【移动端开发】React Native从入门到深入（Android/Ios）

近来闲来无事，准备详细学习一下react Native。

简单介绍：

React Native于F8大会开源,在短短不到一年的时间里,它成为手机端必不可少的开发模式之一。 它充分利用了Facebook现有的业务轮子, 其核心设计理念：既拥有Native的用户体验、又保留React的开发效率。

目前，React Native基本完成了对多端的支持，实现了真正意义上的面向配置开发: 开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现：H5, Android, iOS 多端代码的复用。

注意事项：

1、 目前react native在iOS上仅支持ios7以上，Android仅支持Android4.1以上版本；

github地址:  https://github.com/facebook/react-native

官网文档: http://facebook.github.io/react-native/docs/getting-started.html
2、  由于React Native的版本更新速度很快，如果没有深厚的JavaScript基础，建议选择：

a、功能适中，交互一般，不需要特别多的系统原生支持；

b、对于部分复杂的应用，可以考虑原生+React Native混合开发。

废话不多说，如何在iOS中进行配置呢，下面详情介绍，直接上方法。

react native 的环境需求：

1.1  安装Homebrew

Homebrew是OS X的套件(包)管理器，我们可以通过它获取并且安装很多组件

安装方式:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.2  安装npm 和 Node.js

Node.js最好安装[b]4.0及其以上更高版本，直接下载安装Node.js，node安装成功后npm自动也就有了。[/b]

网址：https://nodejs.org/en/download/。

1.3 watchMan： 用于监控bug文件和文件的变化，并且可以触发指定的操作。

brew install watchman


出现下图，说明安装成功！



1.4 Flow 非必要安装的插件，其作用是找出代码中可能存在的类型错误。

brew install flow



1.5 webStorm 用来编写 react native应用

二 React Navtive 安装

npm install -g react-native-cli


安装成功，如下图



如果出现以下情况：



请获取最高权限 执行：

sudo npm install -g react-native-cli

三。 React Native 生成一个应用的方法

3.1 成功工程 

cd 你要成功的工程存放的文件

ls 进入

react-native init 项目名称


如果长时间等待，没用效果，可更换国内镜像。

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

npm config set disturl https://npm.taobao.org/dist
运程成功截图如下：



此时，打开你的文件你会看到：



a）默认生成[b]android和ios两个平台的原生项目；
[/b]

b）其中，index.android.js和index.ios.js文件为Android和iOS的空壳应用文件；

c）此外，node_modules文件夹，是为Node.js存放和管理npm包资源，也包含React Native框架文件。

四。运行工程

打开iOS 文件使用Xcode运行。

同时终端不可关闭。

五。

5.1查看本地的React Native的版本

react-native --version

命令行效果



5.2 更新本地的React Native的版本

npm update -g react-native-cli

7.3 查询react-native的npm包最新版本

NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

npm包地址 ：
https://www.npmjs.com/package/react-native
命令行查询

npm info react-native

查询效果



项目中查看



5.4 升级或者降级npm包的版本

npm install --save react-native@0.18

文／Zax_Smile

原文链接：http://www.jianshu.com/p/5f6cdf93bab6

【关于我们】

每天名企社招内推（微信[b]公众号[/b]：ourpush），专注于国内各大互联网公司社会招聘内推。每天更新最新互联网名企（包括但不限于BAT网易小米京东乐视携程等名企）内推信息，有技术岗、有产品岗、有运营岗、有设计岗、有交互岗、有销售岗，更有其他N多相关岗位！更多内推信息请扫描以下二维码关注查阅。