菜单

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

2018年9月24日 - 中超赛程

攻东西都来得的覆辙,特别是初的框架,对于React Native,我是这样学的。

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

第一步 :
这是啥

常识

当各种缘由下,需要以某个框架时,那第一码事便是领略此框架是因此来干啊。React
Native,就是之所以来举行活动端的跨平台应用(iOS和Android),使用JavaScript来开。据说性能大相近原生,这是自身极其感谢兴趣之地方。

React native 开发服务器

于付出时,我们的框架是这般的:
图片 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库如下:图片 2

当开发进程遭到一经用另零件,也以同一方式投入到项目面临。具体操作如下:

长:操作起来会进一步通畅,效果特别相近原生。

理清多余文件

剔除ios/和android/下之文书,这些是init命令自动生成的。

图片 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印证了自我前面的一模一样句话——要举行得如原生,有原生的机能,那就是得用原来甚去举行。

具体步骤

取你所欲的RN版本(node_modules).
只要以指令执行输入react-native init AwesomeProject, 得到时版本的RN.
获取AwesomeProject中之package.json和node_modules.
将双方置于与原生项目文件夹平级的地方. 即与iOS和Android文件夹平级之处,
方便对阳台使用.

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

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

君待为此到何以就加什么样. 全部增长也不论妨.

Build Rules中上加静态库文件.
要libRCTText.a等. libRCT开头的还加上.

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

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

剔除原生项目遭到步骤2拷贝过来的react-native文件夹着具有JS文件.
这步本得以与手续2合为1步,单独列有的原委是: 如果没有删除其中的JS文件,
其中的JS代码@providesModuleprovide了成千上万Module,
会与公当步骤1丁之node_modules中之代码冲突.

除去启动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的脚本

随原生项目达传react-native文件夹, 此时react-native文件夹着只有原生代码,
可以进行版本控制;
改package.json, 修改你要的情(如修改dependencies,
将或多或少零部件固定于有版本), 之后用package.json控制更新node_modules.
package.json也齐传SVN, 大家一道用者管理node_modules.

开辟命令执行, 进入和类型平级的目(即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:知道框架用来干嘛的首先步就是好了。

参考

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命令,确保设备就连上了。

图片 4

图片 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:我算只天才。

季步 :
了解开发套路

当即同样步用细查看框架的目录结构,了解其中每个目录有啊,有啊用,我们能改变什么事物。

图片 6

于简易翻看中文件后,我就夺询问框架的主干器件或核心模块,这些相似文档都起证实,了解写法与作用。每一个骨干零部件,我还用了转,尝试了瞬间。

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

终极直接开一个整机示例。

每当学React
Native时候,我并未耐心一个个零部件去尝尝,我单试了主导的几乎单零件。很多丁会小心的将文档和每个组件细细读一全体,试一全体,甚至找下示范(完整的用)自己跑起,学习示例的付出套路。诚然这种艺术大完善,也酷好,但是周期太丰富了,而且印象不充分。

自实现的凡因此到再次套。在加了环境,看罢简单示例后,就直开一个整的运用示范(包含组件的行使、布局写法、页面跳转等东西),一个新闻类的用。

一如既往开始,撞得头破血流,很多事物不了解为什么,也不理解怎么用,遇到了众多问题(后面我会写一首文章总结时遇的题目)。很痛,但是自己看这样的经验是极度深的,看他人写十履行,不如自己于一行。

PS:这个消息应用示范我形容了三天,我拿当旁一样篇稿子证实。

 

总结:

盖机器的原因,我莫办法编译iOS,所以地方的所说之且是在Android上的体会。但读套路应该是相通,这为是本身读React
Native的法门。

 

本文为原本创文章,转载请保留原来出处,方便溯源,如有左地方,谢谢指正。

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图