教你如何用React-Native开发原生应用（一）

这系列文章是自己做App时的一系列总结。

React Native的复杂度不下于学习一门语言那么简单。
里面的东西很难很粗暴，尤其对没一点原生应用开发的同学。
因此，本系列文章适合对学过开发原生应用、对React-Native有一段时间学习的同学。

1.初始化一个项目

环境等一些列问题全部OK后，执行命令：

1

react-native init 项目名

2.run-ios OK

安装完成后，执行命令：

1

react-native run-ios

一切正常，能从Simulator上看到React欢迎页面。

3.修改gradle，不然会重复下载新东西

将android/gradle/wrapper/gradle-wrapper.properties打开，将distributionUrl修改成你本地下载好的目录。

1

distributionUrl=file\:///Users/wuwei/ww/adt-bundle-mac-x86_64-20140702/gradle-2.14.1-all.zip

4.run-android OK

完成修改后，执行命令：

1

react-native run-android

一切正常，能从Genymotion上看到React欢迎页面。

5.修改App名称

1.android根目录：AndroidManifest.xml
找到配置文件res/values，修改string.xml文件里面的内容，修改成功。

2.ios根目录：项目名.xcodeproj
找到配置文件项目名/Info.plist，修改CFBundleDisplayName，修改成功。

6.修改App的Logo

1.android

1
2
3
4
5
6

目录      尺寸
res/mipmap-mdpi  48x48
res/mipmap-hdpi  72x72
res/mipmap-xhdpi 96x96
res/mipmap-xxhdpi144x144
res/playstore-icon.png 512x512

2.ios

1
2
3
4
5

目录      尺寸
Images.xcassets/
iTunesArtwork@1x.png  512x512
iTunesArtwork@2x.png  1024x1024
iTunesArtwork@3x.png  1536×1536

其余图片全部放进
Images.xcassets/AppIcon.appiconset里面

7.android打包apk

细节可看react native中文官方文档：
http://reactnative.cn/docs/0.42/signed-apk-android.html#content

使用打包命令：

1

cd android && ./gradlew assembleRelease

注意：
不混淆，直接配置即可
混淆，会报错
:app:transformClassesAndResourcesWithProguardForRelease，
解决办法：在proguard-rules.pro文件中增加

1
2

-dontwarn okhttp3.**
-dontwarn com.facebook.**

apk包在build/outputs/apk/app-release.apk，用android手机安装成功。

8.ios打包ipa

1.注册苹果开发者账号，登录网站**https://developer.apple.com/membercenter**

个人版688元/年

2.点击进入Certificates, Identifiers & Profiles

3.创建证书

作用：允许你在Mac上进行开发和发布App
共5步：
1.创建证书
证书分为开发证书和发布证书

前提：需要 CSR 文件
在你的 Mac 上的”应用程序”文件夹，打开”实用程序”文件夹和启动”钥匙串访问”。
在钥匙串访问下拉菜单中，选择钥匙串访问 > 证书助理 > 从证书颁发机构请求证书。
创建到桌面，出现CertificateSigningRequest.certSigningRequest即成功。
注意：这一个本地证书可以同时用来生成“开发证书”和“发布证书”。

创建后，上传CSR文件即可。
点击“Download”按钮，下载证书。
下载ios_development.cer、ios_distribution.cer后双击安装。

ios_development.cer开发证书
ios_distribution.cer发布证书

2.添加app ids
作用：只有满足appid名字的工程才能进行真机测试
Name：标示的名字，展示用
Bundle ID：签名，xcode用
选第二个，使用广域标示。
一路继续，Registration complete.

3.添加设备
作用：允许进行真机调试的设备
需要设备uuid，用USB插上iPhone，在iTunes里的手机，点击序列号即可看到。
输入uuid，一路进行，Registration complete.

4.创建调试证书
作用：整合，xCode调试使用
选择Provisioning Profiles目录下的All，同样点击右上方的“十”号进入证书添加界面.
一路继续，项目名.mobileprovision成功。下载后双击安装。

4.IOS打包

方式有多种，建议用Xcode打包
1.打开Xcode

找到General，将Signing的 Automatically manage signing的勾取消掉。

Signing(Debug)换成调试证书的Debug，
Singing（Release）换成调试证书的Release.

2.选择Release 模式
点击项目名，出现选项列表，找到Edit Scheme

选择Run，将Debug换成Release
选择Archive，也将Debug换成Release

3.点击Product->Archive开始打包

4.打包成功后，出现管理页面，
点击Export出现4种包：
Save for iOS App Store Deployment
导出像发布到app store里的那样的ipa包
Save for Ad Hoc Deployment
导出一个带有广告标识的ipa包
Save for Enterprise Deployment
用于企业级账号的，个人账号不能选个
Save for Development Deployment
导出一个开发版的ipa包

想上传到App Store选第一个，测试选第四个呗

选择好后，一路默认继续，最后默认出现存储位置Download，点完成，历经千辛万苦，终于打出了ipa包。

注意：在打包的时候，如果真机还是装不上，请注意是否你输入的uuid是正确的，一定要确保正确哦。
如果不正确，需要重新下载调试证书，因为在选设备的时候，如果uuid错误的话，相当于添加设备是失败的。（坑了我好几小时，一定注意哈）

选择Product->Archive如果是灰色的，请先选择成Generic iOS Device。

Xcode常用命令：

1
2

command+shift+k 清除clean，重新部署项目
command+b 重新编译项目

下面给出安装成功后的配置截图：
首先证书：

接着General：

然后Archive：

最后Signing：