(一)[环境搭建]React Native 从零到构建Android与IOS应用发布(填平路上的坑)

背景

我是一名程序员,做了6年PHP 开发,也陆陆续续使用过Python作为辅助。当然,由于是小规模团队,所以也属性Javascript,HTML5等,算是有一定的基础在。

React Native的兴起,使大部分没接触过Java和Object-c/swift的程序员也能开发常用的APP应用,随着需求的增长,我们也逐渐需要开发对应的APP,于是开始加入React Native大军,由于网上的资料多半是属于教程类,遇到问题很难解决,再加上Debug机制与以前使用的PHP和Python不太一样,导致调试困难,固写此文做记录,以免在之后的开发中遇到类似问题。坑太多,大神太少,这里赞一下极光的客服人员,回复快速热心,同时也感谢所有在我开发过程中给我提供帮助的好心大神。

一、环境搭建

React Native 是可以跨平台开发APP应用,由于我初入React Native,所以我分别在Window 7和Mac安装了环境

1) Android

安卓环境是需要NodeJs和 JAVA的JDK以及JRE还有ANDROID SDK,这些环境的安装,网上有一大堆教程,而且流程比较多,固不在此文详细介绍,我提供以下链接供萌新参考:

NodeJs安装:http://blog.csdn.net/u010255310/article/details/52205132

Java环境安装: http://blog.csdn.net/u012934325/article/details/73441617

Android SDK安装:http://blog.csdn.net/love4399/article/details/77164500 注意,可以不用安装eclipse,只看SDK就好了。

值得注意的是,最开始我并不知道Android SDKReact Native的关系,所以本着不报错的原则,我下载了各个版本的 SDK Tools,Build-tools,Platform,Support等,然而,确实是没有报错,但是我安卓模拟器会经常在使用scrollView等组件的时候卡死,我以为是我代码有问题,后经群里的一个大神提醒,React Native官方有说明,RN 的SDK Build-tools 最好的版本是23.0.1,模拟器的版本最好用最新的,当然,大神用的是Android 7.0 也就是API version 24,所以我也用了这个版本,并且大神说版本向下兼容,打包不会出现问题,确实也没什么问题,无论是模拟器上调试APP还是真机测试都不再卡死也很流畅。

所以,Android SDK只需要安装需要使用的即可。

以下是我的Android SDK安装的Packages,部分是RN插件需要用到的

Android SDK Tools Rev.: 25.2.5

Android SDK Build-tools Rev.:25.0.2

Android SDK Build-tools Rev.:23.0.2

Android SDK Build-tools Rev.:23.0.1

SDK Platform Rev.: 27

Android 7.1 (API 25) 下的子项全部安装,因为我模拟器是安卓7.1,所以你的模拟器版本是多少,就安装对应版本下的子项。

Extras:(这下面我是全部勾选安装了的)

Android Support Repository Rev.:47

Android Support Library Rev.:23.2.1

......

至此,环境安装完毕,这时我们需要安装react-native

由于国外的npm包管理器很慢,所以我们需要用到国内淘宝的npm包镜像:

执行以下命令:

npm configsetregistry https://registry.npm.taobao.org


然后执行命令安装React native:

npm install -g react-native-cli

如果没有错误,就安装成功了,如果出现错误,那说明基础环境配置有问题

然后就可以开始创建属于你的React Native项目:

cd (你的项目所在路径) 例如:

cd E:/reactDemo/

然后

react-native init (你的APP名称)

成功后,该目录下会生成 APP名称的文件夹,这就是React Native的项目文件

该文件夹下包含:

android 、ios、node_modules、index.js、App.js等文件

然后进入项目app目录运行(cd e:/reactDemo/你的APP项目名)

react-native start

新开一个cmd控制台

进入项目app目录运行

react-native run-android

我在运行时,遇到了找不到bundle包文件,我起初是以为自己没生成,于是按网上的教程打了一个离线包,然而同样提示 找不到  index.android.bundle,后来半天我才反应过来,网上的教程全是让新在 index.android.js里面注册app,实际上新版本的react native只有一个index.js,同样,bundle也是 index.bundle,所以当然会提示找不到index.android.bundle,网上教程不适用于新版RN,需要特别注意

当run-android运行后,会报错,为什么呢,因为没有连接设备,所以我们需要连接一台设备(虚拟机/真机)

我使用的模拟器是Genymotion模拟器,下载了一个 Google Nexus 6P-7.1.0 API 25 的系统安装上,再控制台进入android sdk目录下的platform-tools目录,运行:

adb devices

获得 Genymotion的端口

127.0.0.1:5555 device

adb connect 127.0.0.1:5555

之后,模拟器便连接成功了,然后重新运行run-android命令,模拟器上会自动安装RN应用并启动:

由于我做了很久,所以我依稀记得风神模拟器是必须要配置IP的,但我用了genymotion后好像并不需要配置IP和端口,所以如果你安装出现报错:

could not connect to development server.

那么你需要摇晃手机或使用模拟器上摇晃手机的按钮,然后弹出开发者菜单,选择 Dev settings.

然后点击 Debug server host & port for device

填写你的react native 环境的IP地址以及端口8081,例如我RN环境IP是192.168.3.* 虚拟机是192.168.122.* 那么我需要设置 192.168.3.*:8081 具体根据你的实际IP来设置

做完以上操作,再次通过开发者菜单 reload js,即可看到正常的页面:

Welcome to react native.

至此,安卓环境配置完成


2)IOS

IOS下需要安装Xcode、Xcode Command、HomeBlew、NodeJs、watchman、flow

同时你需要拥有一个苹果开发者帐号,我是使用的企业开发者帐号:688的,所以我并不确定免费开发者是否也能完成后续的操作,但仅开发模式而言是没问题的,主要是签名证书这块可能会有问题。

安装完Xcode后,我并没有安装Xcode Command,导致后面出现错误,所以这里应该先安装 Xcode Command,本来我是按照网上的教程

xcode-select --install

运行了这个命令,然而,Xcode提示我并不能下载(EXO ME?),试过很多次都不行,网上也没相关资料,但安装不了就一直编译报错,我实在没办法,最后终于在网上找到一个资料说在苹果开发者后台的download下有该工具,于是赶紧打开开发者中心 developer.apple.com 去下载了一个对应的command(这里是需要根据你mac的IOS版本和XCode进行选择下载的)

下载了苹果的xcode-command安装包后安装完成。

注意:如果以上步骤或以下步骤出现无法操作目录的错误的话,则需要提供管理员权限,有两种方法,一种是 sudo + 命令(例如 sudo brew install node),一种是取得切换为root用户 sudo -s 然后输入密码后切换为root账户

然后安装 HomeBlew

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

然后安装NodeJS

brew install node

安装Flow

brew install flow

然后修改npm包镜像

npm install --registry=https://registry.npm.taobao.org

然后安装React Native

npm install -g react-native-cli

安装完成后,就可以创建你的应用啦

react-native init (你的APP名称) // 注意注意注意!!!!请一定不要使用sudo创建,也不要用管理员权限创建,否则后续会出现找不到或无法访问目录的错误,在init时,请使用 chown -R whoami /usr/local 和 你的账户下面的一个文件夹获取权限,否则会出现权限带来的各种错误,请一定注意

然后运行:

react-native run-ios

就可以自动启动模拟器并安装APP了,这里你可以在Xcode里面设置模拟器机型,IOS SDK版本以及 bundle ID等信息,我们后面会讲到

至此,IOS环境搭建完毕

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容