本文将从 Android 和 IOS 两端分别详细介绍APP是如何设置名称、图标以及启动页的。
首先我们到 图标工厂 上传一张 1024x1024 的图标，然后一键生成所有尺寸的图标，下载下来供两端使用。
icon.png
IOS端
设置名称
在 Xcode 中点击你的项目修改右侧 Display Name 就是APP的名称
image.png
设置图标
将上面下载好的图标组文件夹打开，将 ios 目录下的 AppIcon.appiconset 整个拖入到项目的 ios/rn(工程名)/Images.xcassets 目录下替换原有文件。
image.png
回到 Xcode 中就可以看到所有尺寸的图标都已设置成功
image.png
重新运行项目就可以看到图标了。
image.png
如果重新运行项目图标依然不生效，请确认 Copy Bundle Resources 中是否有 Images.xcassets
image.png
设置启动页
首先安装react-native-splash-screen
yarn add react-native-splash-screen
然后进入 ios 目录执行 pod install
用Xcode打开工程，在 AppDelegate.m 文件中导入 RNSplashScreen.h文件，并添加显示代码。
image.png
#import "RNSplashScreen.h" // 导入
[RNSplashScreen show]; // 显示启动屏
然后新建一个启动图容器
image.png
同样的还是去图标工厂制作启动图
image.png
将下载好的启动图文件夹里 ios 目录下的 LaunchImage.launchimage 拖入到 ios/rn(工程名)/Images.xcassets 里替换原有文件。
image.png
然后查看 App Icons and Launch Images 项
image.png
我们需要将 Launch Screen File 置空，这样就不会走默认的 LaunchScreen.storyboard 了
所以我们需要在 Build Settings 中搜索 Asset Catalog Launch Image Set Name 然后创建启动页名字
image.png
然后在 info 中修改 Launch screen interface file base name为 LaunchImage
image.png
后面的 Value 改为 LaunchImage
image.png
最后在RN中的首页中设置多长时间后关闭启动图
import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import SplashScreen from 'react-native-splash-screen';
export default class Home extends React.Component {
componentDidMount() {
setTimeout(() => {
SplashScreen.hide();
}, 3000);
}
render() {
return (
<View style={styles.content}>
<Text style={{fontFamily: 'FZSJ-LIANGWZDQS'}}>
智者一切求自己，愚者一切求他人。
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
重启可看到效果
LaunchImage.png
Android端
设置名称
修改 android/app/src/main/res/values/strings.xml 文件
<resources>
<string name="app_name">自动驾驶</string>
</resources>
设置图标
将上面下载好的图标组文件夹打开，将 android 目录下的6个文件夹拖入到 android/app/src/main/res 目录下替换。并将 android/app/src/main/AndroidManifest.xml 文件的 icon 和 roundIcon 都改为图标的名称
image.png
image.png
重新编译并运行可以看到效果
设置启动页
将下载好的启动图文件夹里 android 目录下的6个文件夹拖入到 android/app/src/main/res目录里。
image.png
在 android/settings.gradle 文件中加入这两行代码
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
image.png
然后在 android/app/build.gradle 文件中引入 react-native-splash-screen
implementation project(':react-native-splash-screen')
image.png
然后在 android/app/src/main/java/com.rn(项目名)/MainActivity.java 文件中引入安卓包
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // 显示
super.onCreate(savedInstanceState);
}
image.png
在 android/app/src/main/java/com.rn(项目名)/MainApplication.java 文件中引入
import org.devio.rn.splashscreen.SplashScreenReactPackage;
image.png
在 android/app/src/main/res 下创建 layout 文件夹，并在该文件夹下创建 launch_screen.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/screen">
</LinearLayout>
在 android/app/src/main/res/values 文件夹下创建 color.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
在 android/app/src/main/res/values/styles.xml 文件中添加
<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>
image.png
重新编译可看到效果
网友评论