本文將從 Android 和 IOS 兩端分別詳細(xì)介紹APP是如何設(shè)置名稱、圖標(biāo)以及啟動頁的。

首先我們到 圖標(biāo)工廠 上傳一張 1024x1024 的圖標(biāo)，然后一鍵生成所有尺寸的圖標(biāo)，下載下來供兩端使用。

icon.png

IOS端

設(shè)置名稱

在 Xcode 中點(diǎn)擊你的項(xiàng)目修改右側(cè) Display Name 就是APP的名稱

image.png

設(shè)置圖標(biāo)

將上面下載好的圖標(biāo)組文件夾打開，將 ios 目錄下的 AppIcon.appiconset 整個拖入到項(xiàng)目的 ios/rn(工程名)/Images.xcassets 目錄下替換原有文件。

image.png

回到 Xcode 中就可以看到所有尺寸的圖標(biāo)都已設(shè)置成功

image.png

重新運(yùn)行項(xiàng)目就可以看到圖標(biāo)了。

image.png

如果重新運(yùn)行項(xiàng)目圖標(biāo)依然不生效，請確認(rèn) Copy Bundle Resources 中是否有 Images.xcassets

image.png

設(shè)置啟動頁

首先安裝react-native-splash-screen

yarn add react-native-splash-screen

然后進(jìn)入 ios 目錄執(zhí)行 pod install

用Xcode打開工程，在 AppDelegate.m 文件中導(dǎo)入 RNSplashScreen.h文件，并添加顯示代碼。

image.png

#import "RNSplashScreen.h" // 導(dǎo)入

[RNSplashScreen show]; // 顯示啟動屏

然后新建一個啟動圖容器

image.png

同樣的還是去圖標(biāo)工廠制作啟動圖

image.png

將下載好的啟動圖文件夾里 ios 目錄下的 LaunchImage.launchimage 拖入到 ios/rn(工程名)/Images.xcassets 里替換原有文件。

image.png

然后查看 App Icons and Launch Images 項(xiàng)

image.png

我們需要將 Launch Screen File 置空，這樣就不會走默認(rèn)的 LaunchScreen.storyboard 了

所以我們需要在 Build Settings 中搜索 Asset Catalog Launch Image Set Name 然后創(chuàng)建啟動頁名字

image.png

然后在 info 中修改 Launch screen interface file base name為 LaunchImage

image.png

后面的 Value 改為 LaunchImage

image.png

最后在RN中的首頁中設(shè)置多長時(shí)間后關(guān)閉啟動圖

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端

設(shè)置名稱

修改 android/app/src/main/res/values/strings.xml 文件

<resources>
    <string name="app_name">自動駕駛</string>
</resources>

設(shè)置圖標(biāo)

將上面下載好的圖標(biāo)組文件夾打開，將 android 目錄下的6個文件夾拖入到 android/app/src/main/res 目錄下替換。并將 android/app/src/main/AndroidManifest.xml 文件的 icon 和 roundIcon 都改為圖標(biāo)的名稱

image.png

image.png

重新編譯并運(yùn)行可以看到效果

設(shè)置啟動頁

將下載好的啟動圖文件夾里 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(項(xiàng)目名)/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(項(xiàng)目名)/MainApplication.java 文件中引入

 import org.devio.rn.splashscreen.SplashScreenReactPackage;

image.png

在 android/app/src/main/res 下創(chuàng)建 layout 文件夾，并在該文件夾下創(chuàng)建 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 文件夾下創(chuàng)建 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 文件中添加

<!--設(shè)置透明背景-->
<item name="android:windowIsTranslucent">true</item>

image.png

重新編譯可看到效果