从零开始学React Native App开发

前端之家收集整理的这篇文章主要介绍了从零开始学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应用
    cdAwesomeProjectXCodeios/AwesomeProject.xcodeprojRun使index.ios.js便iOSEmulatorRAPPAndroid8android 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相关文章