常识

React native 开发服务器

在开发时,我们的框架是这样的:

当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内。这时,已经不再需要开发服务器的支持了。

npm

npm,全称是 node package manager,顾名思义最开始是作为 Node 的包管理器存在的。不过经过不断的发展和壮大,现在的 npm 早就不再局限于 Node 的范畴,已经成为 Javascript 的包管理器,看看下面的 npm
常见命令:

npm install -g react-native-cli
安装 react native 命令行搭建

React Native 命令行环境搭建困难

npm install -g react-native-cli

这是在从npm服务器上拉取react-native-cli。所以慢的原因便是因为npm服务器不在国内。聪明的国人已给出了解决办法,通过翻墙来解决此问题。更高兴的是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目录下生成一个同名工程,接下来我们需要把这个同名工程的配置迁移到现有项目。

链接React Native的Libraries

查看ios目录下的那个同名工程,会看到这个工程引用的React Native库如下:

在开发过程中如果需要其他组件,也以相同方式加入到项目中。具体操作如下:

  1. 右键项目目录,选择New Group,新建一个名为Libraries的逻辑目录;
  2. 在node modules目录中找到$root_path/node_modules/react-native/Libraries,React Native的所有库都是以static library的形式提供;
  3. 将对应的.project文件拖入到Libraries逻辑目录下,效果如上图所示;
  4. 在Build Phase中link刚才添加的库;

清理多余文件

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

  • 出现问题1 :引入工程里要添加 -ObjC

应该如何做

node_modules中包含两个部分代码, JS代码和原生代码(OC和Java). 实际上, 只有原生代码需要加入原生项目中编译, 而JS代码只用于打包bundle. 这样意味着, 我们可以将node_modules分成两个部分, 原生代码可以随原生项目的SVN/Git进行版本控制, 而JS部分可以通过npm的package.json进行版本控制. 这样, 原生开发同学不需要下载node_modules, 也可以对RN的源码进行修改, 而RN开发同学也可以享受版本控制的好处.

具体步骤

  • 步骤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

参考

React Native 手工搭建环境 之iOS篇的更多相关文章

  1. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  2. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

  3. 【React Native开发】React Native For Android环境配置以及第一个实例(1)

    年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...

  4. 我们一起学React Native(一):环境配置

    最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React ...

  5. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  6. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  7. React Native之配置URL Scheme(iOS Android)

    React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...

  8. React Native之通知栏消息提示(ios)

    React Native之通知栏消息提示(ios) 一,需求分析与概述 详情请查看:React Native之通知栏消息提示(android) 二,极光推送注册与集成 2.1,注册 详情请查看:Rea ...

  9. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

随机推荐

  1. 生产环境下JAVA进程高CPU占用故障排查---temp

    问题描述:生产环境下的某台tomcat7服务器,在刚发布时的时候一切都很正常,在运行一段时间后就出现CPU占用很高的问题,基本上是负载一天比一天高. 问题分析:1,程序属于CPU密集型,和开发沟通过, ...

  2. web单机优化

    又得开始写博客了,目测又要一周一篇了,当然了这不算python跟前端的,个人喜欢notepad++可惜不能放图片,word什么的太讨厌了 为什么要单机优化呢,很简单,因为不论以后是各类集群也好,物理机 ...

  3. libvirt kvm云主机监控

    libvirt

  4. 运用Eclipse的Working Set,界面清爽多了

    使用Eclipse的Working Set,界面清爽多了 想必大家的Eclipse里也会有这么多得工程...... 每次工作使用到的项目肯定不会太多...... 每次从这么大数量的工程当中找到自己要使 ...

  5. java中关键字volatile的误解和使用

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  6. E - Lovely Palindromes

    Description Pari has a friend who loves palindrome numbers. A palindrome number is a number that rea ...

  7. easyui更改messager的OkCancel按钮为(中文)确定取消

    jquery-easyui默认情况下,消息框的按钮文字是英文的OK  Cancel,但可以通过提供的方法进行修改,如: $.extend($.messager.defaults,{ ok:" ...

  8. svn图标更新缓慢

    TSVNCache.exe:在进程管理里有一个Tsvncache.exe这个进程会不定时的对svn目录和非svn目录进行扫描,会造成一定的资源消耗. 此页面允许你选择TSVN为哪些条目显示图标覆盖.选 ...

  9. C 语言实例 - 字符串翻转

    C 语言实例 - 字符串翻转 C 语言实例 C 语言实例 使用递归来翻转字符串. 实例 - 字符串翻转 #include <stdio.h> void reverseSentence(); ...

  10. 「今日 GitHub 趋势」让全世界程序员体会中国的 12306 抢票狂潮

    [2018年1月7日 GitHub 趋势] No.1:yyx990803 / build-your-own-mint 单日 714 星 使用 Plaid,Google 表格和 CircleCI 构建您 ...