从零开始学React Native App开发

转载
lReactN
目录
1. React Native简介
1.1 从何而来，背景介绍
1.2 为什么要使用React Native开发
1.3 环境搭建
1.4 基础开发工具与调试

@H_502_10@

React Native 开发基础
2.1 flexBox 布局基础知识
2.2.JaveScript 语法基础
2.3 React Native 开发基础支持及代码解读
2.4 React Native 组建生命周期

编写第一个React Native Demo

React Native 在实际项目的应用
5.学习参考网址

前言
年初写的，用于公司内部技术分享的，一直偷懒没搬到csdn上来。今天心情不好，给它帮个家吧，这个技术分享，并不是技术博客，
所以很多东西是讲出来的，这里记录不不全，大家将就吧。＝＝！。

1.1 从何而来，背景介
React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站。
做出来以后，发现这套东西很好用，就在2013年5月开源了。后来延伸到其他平台就有了 React Native ，2015年10月Raact Native 支持了

android 平台。React 不同于PhoneGap ，H5,它的口号是 Learn Once ，Write anyWhere !

1.2 为什么要使用React Native开发
a.比webview 更好的体验，更好的性能，更好的手机交互
（参见博客 H5、React Native、Native应用对比分析 http://vczero.github.io/react_native/H5-React-Native-Native.html）
b.未来发展的一种趋势之一，提前了解学习，装13
c.解决项目中一些痛点，比如更新，ui方面的需求改动，丰富的运营手段。

1.3 环境搭建 (Mac OS)

1)安装Homblew，必要工具vpn
通过终端运行命令
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
安装完毕，运行执行 blew －v 查看版本号，确定是否安装成功
2)安装nodes.js
a.首先安装 nvm,nvm使你可以可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。
安装－终端命令输入curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
这个过程其实就是去https://github.com/creationix/nvm#installation 把一个 install script xi运行
下载执行完毕后会提示你没有设置环境变量啥的，通过终端在根目录下建立一个 .bashrc 及./bash_profile
加入下面内容
export NVM_DIR=”/Users/cbf/.nvm”
[ -s “ $NVM_DIR/nvm.sh" ] && . "$ NVM_DIR/nvm.sh” # This loads nvm
export ANDROID_HOME=~/Library/Android/sdk ＃这个是你的sdks环境变量
然后进入 .nvm 文件夹下执行 ./install.sh 即可安装成功
然后 nvm -v 查看是否安装成功
b.安装node,终端安装命令
nvm install node && nvm alias default node
安装完成后，通过 node 命令确定是否安装成功
3)安装watchman
在命令行中输入brew install watchman，我们推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。
4)安装flow
如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。
5)OS开发环境准备
需要xcode 7以上，我下载的事xcode7.2 ，需要os x 10.10.5 版本才能支持
6)快速开始
由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：
终端－》
npm config set registryhttps://registry.npm.taobao.org
npm config set disturlhttps://npm.taobao.org/dist
npm install -g react-native-cli
init 项目命令
react-native init AwesomeProject ＃新建一个项目
不过这个时间太久，推荐使用下面网址的项目，解压后直接可以运行
http://bbs.reactnative.cn/topic/11/react-native%E4%B8%AD%E6%96%87%E7%BD%91%E5%AE%98%E6%96%B9%E5%8F%91%E5%B8%83%E5%AE%8C%E6%95%B4%E6%96%B0%E9%A1%B9%E7%9B%AE%E5%8C%85-
%E6%97%A0%E9%9C%80init%E7%9B%B4%E6%8E%A5%E8%BF%90%E8%A1%8C
7）运行iOS应用
$cd AwesomeProject 用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>！运行Android应用，干巴巴的，给大家上张图先 8）运行android应用$ cd AwesomeProject
$ react-native run-android
使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按Menu键（通常是F2，在Genymotion模拟器中是⌘+M）然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
windows 下安装环境未亲自过坑，大家可以参见一下博客尝试
http://www.cnblogs.com/meteoric_cry/p/4874517.html

1.4 基础开发工具与调试
我用的是sublime Text ，另外装了些代码补全和高亮的插件,插件通过Package Install 来安装
安装的插件见下图

@H_502_10@

React Native 开发基础
2.1flexBox 布局基础知识
什么是FlexBox
FlexBox 是css3 里面引入的布局模型－弹性盒子模型，旨在通过弹性的方式来对齐河分布容器中的内容空间，
使其能够适应不同屏幕的宽度。react nativie中的flexBox 是这个规范的一个子集
FlexBox 解决了什么问题？
浮动布局
不同宽度屏幕的适
宽度自动分配
水平垂直居中

Flex 属性
容器属性
flexDirection ： row,row-reverse,colum,colum-reverse #类型于linerlayout 里的 orientation 属性
flexWrap : wap,nowap,wap-reverse #textview 是否换行
alignItems ： flex-start,flex-end,center,stretch # item 的排列对齐方式，上对齐，下对齐上下间距对齐，以及严苛对其
justifyContent：flex-start,space-between,space-roud # 类似于linerlayout里 layout_gravity 属性

元素属性
flex ：number #类型于weight 属性
alignSelf ：atuo,flex-start,stretch #类似于 gravity 属性
其他
flex－flow flexDirection 和 flexWrap 属性的简写形式，默认值为 row nowrap
更详细的布局知识可以参见下面
React Native 布局指南-v4.pdf

2.2.JaveScript 语法基础
经常看到源码里面符号＝>表示的意思
//ES
var selected = allJobs.filter(function (job) {
return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

2.3 React Native 开发基础支持及代码解读
在React中，所有UI的组件都被放置在render（）方法中，并且被state状态控制。
你的render（）方法定义了UI在各种状态是如何展现的。当调用setState()的时候，React会找到需要改变的部分并替你修改。
一个简单的按钮时间可以通过如下表示
{this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}
this.setState({buttonClicked:!this.state.buttonClicked});

2.4 组建生命周期图
   就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，
   就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：

可以把组件生命周期大致分为三个阶段：
第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

学习更详细信息参考链接
通往全栈工程师的捷径 —— React
http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&scene=1&srcid=1119XfFA8t5QQprIjzp76fcr&key=ff7411024a07f3ebf6601418be94ccd6219ed18e580029547278b6eadd5def524defc8dbfdfcf673a7daa87723cfa4bb&ascene=0&uin=NTYzMDc5MTc1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.11.1+build(15B42)&version=11020201&pass_ticket=a82zcv0P%2B6ztN4xgcdnD%2FWtFbQjxhMOiiUJGZVbk6FUhTeozLqrMlGuES%2FvVmaI0

React Native 中组件的生命周期
http://www.race604.com/react-native-component-lifecycle/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

@H_502_10@

编写第一个React Native Demo

React Native 在实际项目的应

5.学习参考网址

参考资料
http://reactnative.cn/docs/navigatorios.html#content＃ react native 中文社区
http://www.jianshu.com/p/96febc4fec45 ＃平安科技移动开发二队技术周报（特别版のReact Native专题）
http://www.cnblogs.com/unofficial/p/4843734.html ＃window 下搭建react native 环境
http://www.cnblogs.com/meteoric_cry/p/4874517.html ＃踩过的坑
http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle # mac 下模拟器调试出问题，参见这个
The emulator (already launched) will return: Unable to download JS Bundle; start again the JS server:
react-native start Hit Reload JS on the emulator. It worked for me. Hope it will help
http://www.oschina.net/translate/going-native-with-react # react native app 简单教程
https://github.com/xujinyang/react-native-android-guide

加群请扫码

从零开始学React Native App开发

猜你在找的React相关文章