likes
comments
collection
share

react native入门配置

作者站长头像
站长
· 阅读数 35

网上已经有很多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入门配置

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

转载自:https://juejin.cn/post/7149413889925447711
评论
请登录