美文网首页
二、开发环境搭建

二、开发环境搭建

作者: 伯纳乌的追风少年 | 来源:发表于2018-03-14 20:04 被阅读0次

想要开发App,首先要做的就是搭建开发环境,因为App的调试、编译、打包都需要原生的开发环境作为支持,如果环境没有搭建好,开发App无从谈起。
开发App与开发web相比首先是设备要求较高,由于IOS开发需要安装XCode工具,所以我们的开发操作系统必须是苹果系统。而app模拟器的运行是比较占用内存和系统资源的,尤其是在调试的时候需要同时运行Android Studio和Xcode两个开发工具和android、ios两个模拟器,同时还有可能需要打开多个终端窗口。因此建议大家选购性能较强的macbook pro,至少8g内存以上的版本。如果经济比较紧张的话可以选购性价比更高的mac mini,不过需要外接键鼠和屏幕。解决了设备要求,我们可以开始搭建开发环境了。

一、搭建开发环境:

1、homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R `whoami` /usr/local

homebrew是mac平台的常用工具,大家可以安装下来以备不时之需。在这里安装homebrew是为了安装后面的nodejs,但其实不用homebrew也可以安装nodejs

2、Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

我们这里也可以直接通过进入nodejs的官网,点击下载安装包进行下载安装

3、Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

yarn在安装依赖时速度比npm更快,而且yarn在安装依赖时可以锁死依赖的版本,包括依赖本身所依赖的依赖版本。可以避免很多未知的安装错误。所以在其他项目中也可以使用yarn来代替npm

二、安装开发工具

1、Xcode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

由于是在mac平台,Xcode的安装比较简单,就不多做介绍了。而在window环境安装不了Xcode,因此只能放弃ios的开发了。

2、Android Studio

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。

安装过程中有一些需要改动的选项:

  • 选择Custom选项:
custom installation
  • 勾选PerformanceAndroid Virtual Device
additional installs
  • 安装完成后,在Android Studio的启动欢迎界面中选择Configure | SDK Manager
configure sdk
  • SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image
platforms
  • SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须是这个版本)。然后还要勾选最底部的Android Support Repository.
build tools
以上需要选择的安装版本都是必须选上的,如果有所遗漏的话,react-native的安卓版本是无法成功编译和运行。而如果你在react-native中引入了react-native-video、react-native-audio、react-native-image-picker等插件的话可能还需引入其他模块,在编译的时候,android-studio会提示哪些模块缺失,你只需要根据提示将其正确安装就行了。
ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中:(译注:~表示用户目录,即/Users/你的用户名/,而小数点开头的文件在Finder中是隐藏的,并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作,请点击这里学习)。如果你的命令行不是bash,而是例如zsh等其他,请使用对应的配置文件。

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效(否则重启后才生效):

source ~/.bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

安卓模拟器

安装完毕Android Studio后还需要安装安装模拟器,因为App是需要跑在模拟器中的,默认情况下Android Studio没有安装模拟器,需要手动进行安装:



如图所示可以创建想要的模拟器。
创建好模拟器后,基本表示安卓开发环境搭建完毕


三、将react-native项目跑起来

1、安装react-native-cli
npm i react-native-cli -g
2、初始化react-native项目
react-native init AwesomeProject
3、将初始化的RN项目跑起来
cd AwesomeProject
react-native run-android
react-native run-ios

将RN项目跑起来的前提条件是:成功的安装Xcode和Android Stutio以及相关的模拟器。
如果在run的时候出错可以使用Xcode和Android Stutio打开项目,点击编译查看具体的错误信息。可能是依赖没装好,也有可能是工具安装不全面,根据提示完善相关安装就行了。


Xcode里面找菜单Product-->Build或者快捷键cmd+b完成编译




AndriodStudio直接点击这个图标或者快捷键cmd+f9完成编译

至此,一个干净的reactnative项目构建完毕,开发者可以基于已经完成初始化的AwesomeProject项目进行扩展和开发属于自己的原生App。

相关文章

网友评论

      本文标题:二、开发环境搭建

      本文链接:https://www.haomeiwen.com/subject/quqofftx.html