必赢亚洲手机app下载


Macbook苹果台式机任性选购和入门指南

独立的自作者修养

366net必赢亚洲手机版什么优雅的在已有项目中接入React

背景介绍

React Native(后续简称’RN’)是近来一段时间相当火的前端跨移动端技术,
近期在Github366net必赢亚洲手机版,上watch
2500+, star36000+.
外国使用那项技能的牢笼脸书公司本身的Facebook和非死不可 Groups,
国内选取那项技艺的APP包罗腾讯系的无绳电话机QQ, QQ空间, QQ音乐, 还有阿里的Tmall.
阿里系在此基础上开源了团结的weex,
star也有5k+.
当前一度在项目中行使了近半年的RN, 表现还算稳定. 趟了成百上千坑, 吃了许多亏.
将自个儿度过的路记录下来, 希望对大家所有扶助.

正题

按照RN官网推荐的方式安装好node,
watchman等环境后,
可以在react-native init AwesomeProject日后跑通RN的demo.
然而如此得到的工程是纯新的, 不过大举动静下,
我们都以在已有些工程里进入RN, 因而, 须求在已有档次中连着RN.
PS:翻不了墙的同室能够查看此网站.
配置环境等因为墙的存在会拉动一些劳动, 那地点的篇章网上广大, 就不赘述.

法定推荐的过渡方式

官方推荐应用CocoaPods. 7个月前曾经试过那种方式,
带来的标题是不能立时更新RN版本. 可是此时官网的RN版本是0.31,
而文档中pod已经可以安装0.26.0版本. 或者正是一种优雅方法, 值得一试.

自己推荐的联网方式

趟过的坑

刚发轫在档次中引入RN的时候,
参考的是vczero的一篇文章.
将node_modules整个拷到项目目录下.
可是带来的题目是不能管理node_modules.
node_modules文件夹中有数万个文本, 当时年少不懂事,
一口气将node_modules文件夹上传SVN, 却经历了好数次失败.
原因是文件数太多. 当然将这个文件分批上传是一种艺术, 但是感觉到格外费体力,
且万一前面要翻新RN版本, 难道又要经历两次这种愁肠?
于是乎不打算将node_modules上传, 而是变开支地管理(即人口拷贝一份).
在经历了几天蜜月期后, 大家发现RN本人的界定(其实就是bug), 要修改RN源码.
不大概利用版本管理的坏处此时反映了, 大家需求在线下维护一份修改的代码.
中间经历了三次晋级RN版本, 于是一个一个相比较源码进行修改. 往事不堪回首.

那么毕竟如何做?

node_modules中包罗三个部分代码, JS代码和原生代码(OC和Java). 实际上,
只有原生代码须要进入原生项目中编译, 而JS代码只用于打包bundle.
这样表示, 大家可以将node_modules分成多少个部分,
原生代码可以随原生项目标SVN/Git进行版本控制,
而JS部分可以透过npm的package.json进行版本控制. 那样,
原生开发同学不须要下载node_modules, 也足以对RN的源码进行改动,
而RN开发同学也可以大快朵颐版本控制的好处.
下边介绍Mac-iOS下的具体步骤:

步骤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.msetup函数的URLString的localHost.
Android真机调试就是adb reverse tcp:8081 tcp:8081.
Android环境搭建一些坑可以参见作者这篇文章.

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图