React Native简介和环境配置_星宇大前端的博客-程序员秘密

技术标签: iOS 程序员从零学习ReactNative  React Nactive  iOS程序员学ReactNative  

  • React Native是什么



           Facebook于2015年9月15日发布React Native,广大开发者可以使用JavaScript和React开发跨平台移动应用,React Native提倡组件化开发,即提供一个个封装好的组件,然后组件相互嵌套形成新的组件。
          它充分利用了Facebook现有的业务轮子, 其核心设计理念: 既拥有Native的用户体验、又保留React的开发效率
         
  • React Native优势

1. Native的原生控件有更好的体验;
2. Native有更好的手势识别;
3. Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。

  
Learn once, write anywhere       





这样说并不过分,其实我看到的一些APP源码其实是 Learn once, run anywhere。


Virtual DOM:相对Browser环境下的DOM(文档对象模型)而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信( React Native通信机制详解 « bang’s blog)。


  • React Native环境搭建

搭建地址: http://reactnative.cn/docs/0.46/getting-started.html

这里简要的copy下mac版的搭建,其他版本看中文网


安装

必需的软件

Homebrew#

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复: 

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。 

brew install node

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

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

Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

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

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权: 

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用yarn代替npm操作。

Xcode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

推荐安装的工具

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

brew install watchman

Flow

Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow

Nuclide

Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档

译注:我们更推荐使用WebStormSublime Text来编写React Native应用。

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

注意:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致很多人无法正常运行iOS项目,推荐暂时使用0.44.3的版本。

提示:你可以使用--version参数(注意是个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

  • 使用你喜欢的编辑器打开index.ios.js并随便改上几行。
  • 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

完成了!

恭喜!你已经成功运行并修改了你的第一个React Native应用。




版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ZY_FlyWay/article/details/76021334

智能推荐

04 模块 Prism For WPF_马小巍的博客-程序员秘密

使用Prism的WPF库进行模块化应用程序开发模块化应用程序——可以被分解成一组松散耦合的功能单元(模块),又可以集成到一个更大的应用程序中。客户端模块封装了应用程序全部功能的一部分,典型地表现了一组相关的关系。它可以包含一些相关联的组件,如应用特征;也可以包含用户界面和业务逻辑,或者一部分应用程序的基础结构,如应用级的日志或用户验证。模块之间相互独立但又可以通过一种松散耦合的方式相互通信。使用模块

写Json_瘋小書的博客-程序员秘密

package com.example.day_17bean2json;import java.util.ArrayList;import com.google.gson.Gson;import android.os.Bundle;import android.app.Activity;import android.view.Menu;pub

腾讯云linux服务器安装JDK1.8_叫可乐的猫的博客-程序员秘密

Linux下JDK安装创建目录,下载文件cd /usr/localmkdir java下载文件比较慢,所以选择从csdn下载然后上传到java目录下载地址,推荐:jdk下载路径解压tar -zxvf jdk-8u231-linux-x64.tar.gz配置! vim /etc/profile# /etc/profile   全局变量文件shift+g 快速定...

达内2016前端开发知识点总结--HTML5--8天_a36267862的博客-程序员秘密

HTML5 day01第三阶段:AJAX- 8 —— 综合且容易出错HTML5新特性- 7 —— 零散神不聚Bootstrap - 5 —— 玩命儿被单词今日目标:(1)WebStorm的使用—— 掌握(2)H5新特性之一——表单2.0—— 掌握1.常用的前端开发软件(1)小型软件:小巧启动快,功能简单Editpl...

你让工人为你工作7天,给工人的回报是一根金条。金条平分成相连的7段,你必须在每天结束时给他们一段金条, 如果只许你两次把金条弄断,你如何给你的工人付费?_艾小方的博客-程序员秘密

你让工人为你工作7天,给工人的回报是一根金条。金条平分成相连的7段,你必须在每天结束时给他们一段金条,如果只许你两次把金条弄断,你如何给你的工人付费?题目获得条件:1、 每天给工人金条2、 7段金条你只能分两次分割:分配:第一天给第一段金条------------------------------------(工人有一段金条)第二天给第二段金条,要回第一段金条------------(工人有两段金条) 第三天给第一段金条------------------------------

随便推点

matlab 绘制高斯(Gaussan)函数图像_matlab高斯函数_懒蛤蟆吃天鹅肉的博客-程序员秘密

高斯函数如下:Gaussan=12πσe−(x−μ)22μ2(14)Gaussan = \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\mu^2}}\tag{14}Gaussan=2π​σ1​e−2μ2(x−μ)2​(14)使用 MATLAB 编写高斯函数,需传入x,μ,σx,\mu,\sigmax,μ,σ,注意,此时 xxx 可以是一个数组,这样就可以直接返回一个高斯函数值数组 yyyfunction [y] = Gaussian(x,mu,

Java多线程相关知识点汇总_zhuguang10的博客-程序员秘密

1.ThreadLocal2.如何保证高并发场景下的线程安全?3.JUC(java.util.concurrent)包4.volatile5.信号量同步6.线程池7.线程同步类8.并发集合类9.锁机制1.ThreadLocalThreadLocal如何实现多线程数据隔离?ThreadLocal内存泄漏问题?ThreadLocal脏数据问题?ThreadLocal主要功能:...

解决office2007安装程序找不到 office.zh-cnSetup.xml OFFICELR.CAB OFFICEMUI.MSI OFFICEMUI.XML SET_adn2012的博客-程序员秘密

安装Microsoft Office Project Standard 2007时出现了小问题,经过百度google一番后才发现安装office2007与安装vs2008有着紧密的联系我的机子之前已经安装过VS2008,所以在安装office2007时总是提示“安装程序找不到 office.zh-cn\*”(例如office.zh-cn\Setup.xml),而在安装目录下明明就有

C++中的set_new_handler函数_尚书左仆射的博客-程序员秘密

首先,namespace std中有如下定义:  Typedef void  (*new_handler)();        new_handler  set_new_handler(new_handler  new_p) throw();//C++98        new_handler  set_new_handler (new_handler  new_p) noexcept

计算机操作系统面试总结_Autopilot office的博客-程序员秘密

1 什么是操作系统操作系统是管理和控制计算机系统中各种硬件和软件资源,合理地组织计算机工作流程的系统软件,是用户与计算机之间的接口。2 操作系统的作用存储管理:提高利用率,方便用户使用,同时提供足够的存储空间,方便进程并发运行,例如存储分配与回收,存储保护(防止进程间互相干扰),地址映射(进程逻辑地址到内存物理地址的映射),存储扩充处理机管理:说到底其实就是对进程的管理,例如进程调度(为进...

索引使用注意事项_索引的位置向后移动 那么前面的值会被舍弃_qq_16239775的博客-程序员秘密

索引提速:1.索引不会包含有NULL值的列        只要列中包含有NULL值都将不会被包含在索引中,复合索引中只要有一列含有NULL值,那么这一列对于此复合索引就是无效的。所以我们在数据库设计时不要让字段的默认值为NULL。应该用0、一个特殊的值或者一个空串代替空值。2.复合索引        比如有一条语句是这样的:select * from users wherearea=’beijin...

推荐文章

热门文章

相关标签