React Native 从零到发布APP

(一)[环境搭建]React Native 从零到构建Andro

2017-12-15  本文已影响0人  吾家娇妻

背景

我是一名程序员,做了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环境搭建完毕

上一篇下一篇

猜你喜欢

热点阅读