React Native——我之读书套路。React Native 手工搭建环境 之iOS篇,reactios

修东西都产生得的覆辙,特别是初的框架,对于React Native,我是如此学的。

React Native 手工搭建环境 之iOS篇,reactios

第一步 :
这是啥

常识

每当各种缘由下,需要运用有框架时,那第一件事就是是解这框架是故来干啊。React
Native,就是用来举行活动端的跨平台应用(iOS和Android),使用JavaScript来支付。据说性能特别类似原生,这是自我尽感谢兴趣的地方。

React native 开发服务器

每当开时,我们的框架是这么的:
365bet体育 1

当业内颁发上到生育环境时,开发服务器上有的js文件将会见让编译成包的样式,直接坐至客户端内。这时,已经不复需要支付服务器的支持了。

脚下有关Hybrid
App的框架,有大概两种植分类:

npm

npm,全称是 node package manager,顾名思义最开头是作 Node
的担保管理器存在的。不过经持续的前行和扩大,现在的 npm 早就不再局限为
Node 的面,已经变为 Javascript 的承保管理器,看看下面的 npm
普遍命令:

npm install -g react-native-cli 

安装 react native 命令行搭建
  1. 零件为Web实现为主,附加原生功能调用接口

React Native 命令行环境搭建困难

npm install -g react-native-cli

这是当从npm服务器上拉取react-native-cli。所以迟迟的原委就是为npm服务器不在国内。聪明的同胞就让来了解决办法,通过FQ来缓解此题材。更快乐之是npm提供了一个register的性能,可以为开发者自由的装置镜像地址。开发者们太常用之就是淘宝的镜像地址。据统计国内比较常用之镜像地址有:

http://r.cnpmjs.org/
http://registry.npm.taobao.org/
http://registry.npmjs.eu/
http://registry.npmjs.org.au/
http://npm.strongloop.com/
https://registry.nodejitsu.com/
http://registry.npmjs.pt/

优点:组件可于通常浏览器,微信等页面使用。

package.json 的文本结构

一个合格的 package.json 文件要至少含有 name 和 version
两独字段,这片独字段组成的老二头条组可唯一标识一个管,如下所示:

{
  "name": "AwesomeProject",
  "version": "0.0.1"
}
字段名 含义 示例
name 包名需要具备唯一性 "name": "redux"
version 包的版本号,遵循语义化版本(http://semver.org/lang/zh-CN/)格式,也就是版本号包含三位:MAJOR.MINOR.PATCH。MAJOR 表示版本发生大的变化,例如 API 不兼容旧版本;MINOR 表示版本增加新功能,但是兼容旧版本的;PATCH 表示兼容旧版本的一些 bug 修复 "version": "3.5.2"
description 项目的描述,尽量保持言简意赅 "description": "Predictable state container for JavaScript apps"
dependencies 这个 Package 的生产依赖,当用户安装你的 Package 时会自动安装这些依赖 "dependencies": { "react": "15.1.0", "react-native": "0.27.0-rc2" }
private 设置为 true 时,npm 将不会发布这个 Package,这个标记主要用来防止不小心发布某个内部使用的私有 Package 到公共的 npm registry "private": true

脚下这些早已够,如果急需还多,请查看这链接

症结:在少数低端机页面卡顿,或者未平易,效果小原生很多。

初始化React Native环境

每当我们而安排React
Native环境之类别遭到,进入及*.xcodeproj文件的上级目录,运行React
Native初始化react-native init [Project Name]
如此这般见面当ios目录下生成一个同名工程,接下我们需要将这同名工程的安排迁移至现有项目。

  1. 零件为原生实现为主,附加原生功能调用接口

链接React Native的Libraries

查ios目录下的要命同名工程,会见到这工程引用的React
Native库如下:365bet体育 2

当开发进程被若用另零件,也因为同方式加入到品种被。具体操作如下:

长:操作起来会愈加流畅,效果非常接近原生。

清理多余文件

删去ios/和android/下的文本,这些是init命令自动生成的。

  • 并发问题1 :引入工程里要填补加 -ObjC

365bet体育 3

短:只能当一定容器下以(但某些情况下者不到底缺点)。

相应怎么做

node_modules备受含有两个组成部分代码, JS代码和原生代码(OC以及Java). 实际上,
只发生原生代码用参加原生项目受到编译, 而JS代码只用于自包bundle.
这样表示, 我们得将node_modules分成两只有,
原生代码可以按原生项目的SVN/Git进行版本控制,
而JS部分可以经过npm的package.json进展版本控制. 这样,
原生开发同学不需要下载node_modules, 也足以本着RN的源码进行改动,
而RN开发同学也得大快朵颐版本控制的好处.

在我看来,React Native应该是次种,虽然Hybrid
App的定义是Web页面和原生壳的咬合,但React
Native的js文件呢算Web吧。另外,React
Native印证了自前的等同句话——要做得如原生,有原生的效能,那便得用原大去开。

具体步骤

  • 步骤1

获得你所用之RN版本(node_modules).
假使在命令执行输入react-native init AwesomeProject, 得到最新版本的RN.
获取AwesomeProject中的package.json和node_modules.
将两头置于与原生项目文件夹平级的地方. 即和iOS和Android文件夹平级之处在,
方便对平台使用.

  • 步骤2

拷贝node_modules/react-native文件夹到原生项目被,
iOS项目保留Libraries文件夹和React文件夹(安卓项目保留ReactAndroid文件夹).
其余有删除.

  • 步骤3

iOS项目, 创建Group,放置RN工程项目:

/node_modules/react-native/React/React.xcodeproj
/node_modules/react-native/Libraries/Text/RCTText.xcodeproj
/node_modules/react-native/Libraries/WebSocket/RCT WebSocket.xcodeproj

公要为此到何等就加以什么. 全部增长也不管妨.

  • 步骤4

Build Rules中补充加静态库文件.
若果libRCTText.a等. libRCT开头的还加上.

  • 步骤5

Build Settings添加循环依赖
在Targets-Build Settings-Header Search
Paths中加入$(PROJECT_DIR)/项目名/ReactNative/react-native/React
这里要入的凡react-native/React文件夹的路子,
我之react-native文件夹在项目名/ReactNative下,因此是如此写.

  • 步骤6

设置Other Linker Flags
Targets-Build Settings-Other Linker Flags中加入-ObjC

  • 步骤7

去除原生项目受到步骤2拷贝过来的react-native文件夹着有着JS文件.
这步本可跟手续2合为1步,单独列有的案由是: 如果没删其中的JS文件,
其中的JS代码@providesModuleprovide了诸多Module,
会与公在步骤1遭受的node_modules中之代码冲突.

  • 步骤8

抹启动node服务脚本.
开辟步骤3受引入的RN工程项目:React.xcodeproj-Targets-Build Phases-Run
Script. 删除启动node服务脚本的坏脚本. 即情节是
if nc -w 5 -z localhost 8081 ; then if ! curl -s "http://localhost:8081/status" | grep -q "packager-status:running" ; then echo "Port 8081 already in use, packager is either not running or not running correctly" exit 2 fi else open "$SRCROOT/../packager/launchPackager.command" || echo "Can't start packager automatically" fi的脚本

  • 步骤9

随原生项目达成传react-native文件夹, 此时react-native文件夹着只有原生代码,
可以开展版本控制;
修改package.json, 修改你要之始末(如修改dependencies,
将一些零部件固定在某个版本), 之后用package.json控制更新node_modules.
package.json也达传SVN, 大家一同用是管理node_modules.

  • 步骤10

开拓命令执行, 进入及类型平级的目(即node_modules所当目), 输入npm
start. 启动node服务.
打开XCode/Android Studio, 进入RN开发.

小细节

iOS真机调试, 需要用localHost改呢本机的ip,
同时手机要与计算机处于同一wifi下.
倘假定真机chrome debug,
要修改RCTWebSocketExecutor.m中setup函数的URLString的localHost.
Android真机调试就是adb reverse tcp:8081 tcp:8081

PS:知道框架用来涉及嘛的率先步就是形成了。

参考

  • react native开发服务器 服务器安装
  • React Native入门实例教程 – 起现有项目搬迁
  • 于已生路中接入React Native

http://www.bkjia.com/IOSjc/1195070.htmlwww.bkjia.comtruehttp://www.bkjia.com/IOSjc/1195070.htmlTechArticleReact Native 手工搭建环境 之iOS篇,reactios 常识
React native 开发服务器 在支付时,我们的框架是这样的: 
当正式颁发上及生产条件时,开…

仲步 :
环境将起

次步,该管开发环境多起来。在装React
Native开发条件时,该装NodeJS装NodeJS,该装Python的装Python,注意安装的本。每个框架还必然会发生这些新手指引,照在来一步步即使实行了,这里注意一点,安装软件错了不要怕,仔细翻看报错的日记,然后在网上查,你遇上的题目别人吧毫无疑问遇到了(99%是这么的)。

React Native需要装的物非常多的,不过自己以在文档很顺畅的就安装完毕了。

PS:我作的是以Window上开发Android的环境。

第三步 :
HelloWorld

出只笑话:某程序员辞职以后准备练习书法,他请来了所有最好的书法用具,在张上写下了几独字:Hello
World。

好说,HelloWorld是一体语言或框架上的序曲,它是经典中之经。

遂,很要紧之同一步开始了,React Native的HelloWorld :

1. 初始化工程

以DOS输入命令 :react-native init AwesomeProject

由命上看,看起是初始化一个工,于是,

1分钟……

10分钟……

1小时……

2小时……

纳尼,什么鬼,接近3只小时还无初始化好,真是X了狗了。

2. 换npm源

传闻是react-native命令行从npm官方源拖代码会以“和谐”的案由,会拉扯不了,于是有人建议利用国内的:

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

额,这点儿句子发号施令就非追究了,就是换下载包的地方。

更输入步骤一的授命,哎哟,还真的10差不多分钟即初始化好了。

PS:下了众Node Module。

3. 安插上真机

自己无意装模拟器,于是自己用的是真机。

插入上我之Android手机(小米 红米2A),输入adb
devices命令,确保设备已经连上了。

365bet体育 4

365bet体育 54.
运行程序

cd进AwesomeProject目录,执行react-native run-android。

随即是就是会见见到在咻咻咻的编译,在97%时段,会叫您于大哥大点击确认安装,点击确定就是实行。

100%见面自行启动index.android.js的启页面,进去以后,纳尼,是一无所有的,什么破!!!!

PS:这时程序都装好了,可以拔掉无情了。

5. 开拓相应采取权限

乃据说小米的机器默认限制显示悬浮窗,可以到以->权限管理->显示悬浮窗打开,这样可以查错误日志。

PS:其他机器可能吧急需。

遂设置好后,重开应用,哈哈哈哈,果然有红的漂流窗错误提示,错误提示:“Unable
to connect with remote
debugger”,讲道理是荒唐不雅亮,不过出转移总是好之。

PS:在后来自家完全查看所有React
Native时候,在Android”在装置上运行“有描绘清楚,但马上即令愣头青,瞎调。

6. 安远程ip、port

在点击菜单栏按钮时,发现了一个Dev
Settings菜单,于是上查看后发觉,里面有好安装ip和端口的。

关系第四步出现的一个起步远程页面的窗口,猜想是免是用装
电脑ip和充分服务端口。 于是安ip和port,reload一下页面,果然看到了React
Native的HelloWorld。

PS:我算个天才。

季步 :
了解开发套路

这同步要精心查阅框架的目结构,了解中每个目录有什么,有什么用,我们能够转移呀东西。

365bet体育 6

每当简要翻看里面文件后,我便失了解框架的着力组件或基本模块,这些相似文档都发征,了解写法与功效。每一个主导组件,我还下了一晃,尝试了一晃。

第五步 :
一个简单完整的Demo

末了直接开一个整体示例。

于学React
Native时候,我从不耐心一个个零件去尝尝,我偏偏试了主导的几乎单零件。很多人会面小心的将文档和每个组件细细读一全,试一整,甚至找下示范(完整的利用)自己跑起,学习示例的开销套路。诚然这种方式充分完善,也特别好,但是周期太长了,而且印象不殊。

自身实现的是为此到重套。在添了环境,看罢简短示例后,就径直开一个总体的下示范(包含组件的采取、布局写法、页面跳转等物),一个新闻类的应用。

同一开始,撞得头破血流,很多事物不明了为何,也未明了怎么用,遇到了重重题材(后面我会写一篇稿子总结时遇的题目)。很惨痛,但是自看这么的体会是最为深的,看他人写十执行,不如自己打一行。

PS:这个新闻应用示范我形容了三天,我用于其它一样首文章证实。

 

总结:

为机器的原由,我没道编译iOS,所以地方的所说的都是当Android上之心得。但上套路应该是相通,这吗是我上React
Native的计。

 

正文也本创文章,转载请保留原来出处,方便溯源,如产生荒唐地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5675751.html

相关文章