网上已经有很多react native的入门教程了,这里就不多赘述了。重点讲一些他人没有讲的优化的配置把。

1.配置镜像

留意: 项目中有两个build.gradle,留意分清楚是\android\build.gradle仍是\android\app\build.gradle

因为资源都是在国外,在发动app打包的时分,就算开了科学上网的东西,有时分也是会连不上。此时最好配置一下镜像。在项目根目录\android\build.gradle中,将google()【这里有两处】替换成以下:

react native入门配置

react native入门配置

        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'https://maven.aliyun.com/repository/google' }

2.修正app名

RN的默许app名是AwesomeProject,在开发前端项目的时分,一般项目名都是在package.json中修正,而RN的app名不是在package.json中修正,而是到项目根目录\android\app\src\main\res\values\strings.xml中修正

react native入门配置

3.修正版本号

同样的,修正RN的版本号也不是在package.json中,而是到项目根目录\android\app\build.gradle中:

react native入门配置
但考虑到我们修正版本号比较频繁,并且习气在package.json中修正,此时可以令其在打包的时分读取package.json中的version:
先在顶部导入:

import groovy.json.JsonSlurper

然后在android上方增加

def getAppVersion() {
    def inputFile = new File("../package.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["version"]
}
def appVersion = getAppVersion()

并且把”1.0″改成appVersion,就可以在打包时主动读取package.json了。

react native入门配置

4.修正logo图标

app的logo可以到这个网站去生成,icon.wuruihong.com (注:需要生成两次,一次圆角,一次圆形)

修正成主动圆角之后就可以下载生成。(留意:不要修正文件名)

react native入门配置

第二次修正成50%,并且修正文件名

react native入门配置
下载完后两次都选择解压到桌面,因为文件名是相同的,所以会做一个主动合并,并出现一个替换,选择是,就可以了。

react native入门配置

把项目根目录\android\app\src\main\res中的原图标文件删除掉。

react native入门配置

然后把解压的文件夹中的文件剪切曩昔,重新打包即可。