下载掌阅APP，畅读海量书库
立即打开
搭建环境通常是学习一门新技术时最先遇到的难题，特别是在跨平台开发中，对刚入门的开发者来说是不小的挑战。在搭建环境之前，我们先大致解释一下各平台上的常见概念及其作用，以减少学习者的陌生感。
iOS提供了从开发语言、IDE到App发布及付费的闭合生态，其中包含了大量平台独有的概念及开发步骤。
Xcode是开发iOS App的IDE，用于开发、打包及发布iOS App。你可以通过App Store下载最新的Release版本，也可以通过Apple Develop下载beta版。需要注意的是，beta版的Xcode无法提交构建好的App到iTunes。
CocoaPods是开发者必备的iOS依赖管理工具。在安装CocoaPods之前，首先要在本地安装好Ruby环境，之后只需要执行sudo gem install cocoapods命令就可以直接安装了。
使用模拟器（Simulator）可以在mac OS上模拟iPhone、iPad。下载Xcode时，最新的模拟器会自动一起安装到本地。如果需要增加机型，可以选择addDevice自行添加。如果需要使用旧版本的iOS，则需要在Xcode > Preferences > Components中自行下载，之后所有支持该系统版本的机型都可以使用该系统。
关于iOS App打包发布需要了解两个概念——开发者账号和开发者证书。如果你想把自己的App上传到App Store，需要申请个人开发者账号或企业开发者账号，大致步骤如下。
（1）开发者账号注册：使用Apple ID登录Developer网站，在页面中找到“Join the Apple Developer Program”并按照提示付费和申请，如图1.1所示。
图1.1 Apple开发者首页
（2）证书配置：如果持有开发者账号，可以选择Xcode > Preferences > Accounts，在Accounts界面中直接登录该账号，如图1.2所示，并且在TARGETS选项的Signing & Capabilities标签下勾选Automatically manage signing（自动管理证书，见图1.3），Xcode会自动使用TARGETS选项中配置的Bundle Identifier去申请本机可使用证书。如果未持有开发者账号，则需要在Apple Develop中创建App并在配置证书的计算机上导出p12文件以及描述文件，安装到当前非开发者账号的设备上，并且在TARGETS选项的Signing & Capabilities标签下选择该证书和描述文件。
图1.2 Xcode Accounts配置
图1.3 Xcode Signing & Capabilities
（3）打包：将device选择到非模拟器条目上（真机或空都可以），选择Product > Archive命令进行打包编译，如图1.4所示。打包完成后会自动弹出Organizer（也可以在Window菜单中找到打开该功能的命令）；选中刚才打包成功的Archive并单击右侧的Distribute App按钮，按照提示选择打包类型，如图1.5所示。如需上传App Store，则可以选择App Store Connect，直接打包成ipa文件并上传到iTunes。ADHoc和企业证书的打包选项，会影响可安装设备以及证书的选择。
图1.4 打包编译
图1.5 发布
iOS的证书体系相对繁琐，在这里我们简单介绍申请过程中会遇到的一些概念。
Certificates：iOS证书是用来证明iOS App内容合法性和完整性的数字证书。想安装到真机或发布到App Store的App必须经过签名验证，并且其内容是完整、未经篡改的。
Identifiers：App ID，用于标识一个或者一组App，App ID和Xcode中的Bundle ID是一致或匹配的。
Devices：iOS设备。Devices中包含了该账户中所有可用于开发和测试的设备，每台设备使用UDID（设备唯一识别符）来唯一标识。
Profiles：也称Provisioning Profile。一个Provisioning Profile文件包含了上述的所有内容，如证书、App ID、设备，是一个综合描述文件。如果我们要打包或者在真机上运行一个App，首先需要证书来进行签名，用来标识这个App的合法性；其次，需要指明它的App ID，并且验证Bundle ID是否与其一致；最后，在真机调试环节，确认这台设备是否能够运行该App。我们只需选择对应的profile文件就可以进行正常的打包和真机调试，并且这个Provisioning Profile文件会在打包时嵌入.ipa。
上述相关文件均可在Apple开发者网站进行管理，如图1.6和图1.7所示。
图1.6 证书管理入口
图1.7 证书管理首页
Android是基于Linux的开源操作系统，也是当今最主流的智能手机系统之一。
Android Studio集成了Android开发所需要的各种工具，并为Android项目优化了目录文件结构的展示。如果开发者之前没有配置过Android开发环境，建议下载集成了Android SDK的Android Studio安装包，可以极大地减少第一次打开Android Studio时下载相关开发工具所需的时间。
Gradle是一款支持依赖管理、自动化构建、打包、发布和部署的通用性构建工具，主要使用Groovy语言。开发者可以通过应用不同的Gradle插件来构建不同的工程项目。对Android项目来说，用户必须要在工程根目录的build.gradle文件中首先指明适用于Android项目的构建插件——Android Plugin for Gradle，然后添加配置项，所以在Android工程的build.gradle中经常会看见以下代码。
Android视图是Android Studio的默认文件目录视图模式，如图1.8所示，通过聚合Gradle相关文件，可以减少开发者花费在探索目录上的时间。
图1.8 Gradle相关文件的作用
如果开发Android App时没有真机设备，可以通过Android Virtual Device Manager（AVD Manager）添加模拟器，如图1.9所示。
添加不同配置和规格的模拟器需要再次下载相关文件，可能需要一些时间。由于许多Android机型采用了经过各厂商二次开发的深度定制系统，因此最好使用真机进行开发调试，避免出现兼容性问题。
图1.9 Android Studio模拟器位置
使用Android Studio打包项目生成APK（App包），需要先在左边的Build Variants选项中选择打包环境和debug/release版本，然后单击工具栏中的Run按钮，即可将安装包安装至连接的真机或模拟器。打包生成的APK在/app/build/outputs/apk下，如图1.10所示。
图1.10 APK的位置
和大部分框架一样，React Native也具有自己的命令行工具react-native-cli，用于初始化项目。开发者可以通过npm或yarn命令来安装react-native-cli。
安装好之后，可以直接通过命令来构建React Native项目。
也可以指定对应的版本号。
执行完成后，你将收获一个最基础的React Native项目，包含了JavaScript所需的依赖以及iOS工程和Android工程。虽然官方文档上说直接进入项目文件夹运行react-native run-ios即可，但根据自身环境不同，所装依赖的版本也有可能不同，会有一定概率无法成功。建议直接使用Xcode和Android Studio来运行项目，里面有比较详尽的报错信息，无论是依赖缺失还是版本不一致，都可以打印出来。
如果一切顺利的话，你应该能看到0.60版本默认页面如图1.11所示，并且在Learn More中包含了一些基本的文档入口，直接单击即可从浏览器打开对应文档，方便查阅。而该页面局部的代码即包含在项目的App.js中，你可以对其进行修改，开发自己的“Hello World”项目。
图1.11 React Native启动页
利用命令行工具生成工程无疑是最方便快捷的方式，特别是当你需要从零开始搭建项目的时候。但这并不能满足所有的开发场景，有时候可能需要在现有的原生工程中添加React Native环境，将一部分功能交由JavaScript开发。此时，我们要手动在iOS和Android项目中搭建React Native环境。
无论是iOS还是Android项目，在手动搭建React Native环境时都需要通过package.json安装JavaScript依赖。
然后执行npm install下载所需的依赖包。
安装完JavaScript依赖后，需要在podfile中添加React Native依赖，其中的path需要指定到上述package.json安装的node_modules路径下。
添加完成后执行以下命令进行安装。
此刻iOS工程中已经构建起了React Native环境，下一步就可以使用了。
首先在项目根目录的build.gradle文件中修改maven仓库地址配置，主要增加以下代码。
然后打开module app目录下的build.gradle文件，增加以下配置。
接下来打开Android项目根目录下的settings.gradle文件，增加以下配置：
最后单击Android Studio右侧的Gradle标签，选择项目主模块App（demo>app），单击Refresh Gradle Project按钮即可，如图1.12所示。
图1.12 Gradle管理面板
安装完依赖之后，需要在Android项目的Application.java中手动添加ReactNativeHost。
这样就搭建完成了Android的React Native环境。