前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

React Native之Icon/启动图设置

首页
2019-10-04 15:10:12
Front-End
RNreact

# 生成不同尺寸的启动图和图标

方式一

借助Ionic生成不同尺寸的启动图和图标

方式二

各种尺寸Icon图标生成

使用图标工厂生成 https://icon.wuruihong.com/

  1. 安卓下替换andriod/app/src/main/res/下的mipmap文件即可
  2. iOS下替换如下

各种尺寸启动图图标生成

启动图也可以使用图标工厂生产了 https://icon.wuruihong.com/splash

  1. 安卓下拷贝生成的文件到andriod/app/src/main/res/目录下

  1. iOS下拷贝生成的该文件夹替换即可

# 安卓端

修改图标和名称

找到根目录/android/app/src/main/res

启动页

  • 在react-native的android中的启动图和IOS不相同点在于,android没有默认的启动图,在IOS里面有
  • 使用插件 import SplashScreen from 'react-native-splash-screen';
  • https://github.com/crazycodeboy/react-native-splash-screen

把生成好的启动页按这个格式处理即可

# iOS端

修改app名称

编辑 ios/test/Info.plist 文件

<key>CFBundleDisplayName</key>
- <string>$(PRODUCT_NAME)</string>
+ <string>测试程序</string>
fe
  • 生成不同尺寸的启动图和图标
  • 安卓端
  • iOS端
  • 添加启动页

← Vue核心梳理React Native之iOS打包发布 →