react native入门配置

1,893

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

1.配置镜像

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

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

image.png

image.png

        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中修改

image.png

3.修改版本号

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

image.png 但考虑到我们修改版本号比较频繁,并且习惯在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了。

image.png

4.修改logo图标

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

修改成自动圆角之后就可以下载生成。(注意:不要修改文件名)

image.png

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

image.png 下载完后两次都选择解压到桌面,因为文件名是一样的,所以会做一个自动合并,并出现一个替换,选择是,就可以了。

image.png

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

image.png

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