React Native 設置APP名稱、logo圖標、啟動頁

https://www.jianshu.com/p/727c6057fc0a  參考資料

 

APP 開發完成后，我們需要修改 APP 名稱並設置好應用圖標和啟動頁，然后再發布上線。其中，名稱和圖標用於標識 APP，而啟動頁則可以增強應用程序啟動時的用戶體驗、品牌推廣等。本文總結了如何在 React Native 應用中完成名稱、圖標和啟動頁的設置。

 

 

下面都是關於Android端的操作，IOS的話，看我上面參考資料的鏈接

 

1. 修改名稱
編輯 android/app/src/main/res/values/strings.xml 文件

<resources>
-    <string name="app_name">test</string>
+    <string name="app_name">測試程序</string>   
</resources>

 

 

2. 修改應用圖標

替換 android/app/src/main/res 下對應的圖標。

 

注意：里面有兩個圖片文件，一個不能少，名字也要相同

 推薦使用這個工具只需要拖拽一張圖片，就可以迅速生成你需要各種大小的圖片 ：https://icon.wuruihong.com/ ，附上這個工具的圖片，記得“可選參數”你要微調一下

 

 

 

 

3. 設置啟動頁（我參考的資料，有幾處，由於react native更新版本，有些問題，我將其改正）

步驟一，

 yarn add react-native-splash-screen  //不需要手動link，版本高的自動鏈接 

 

步驟二，編輯android\app\src\main\java\com\ 下面的 MainActivity.java   添加以下代碼

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here


public class MainActivity extends ReactActivity {
    // ...other code
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }   
}

 

步驟三，在android/app/src/main/res/layout 文件夾下創建啟動頁布局文件 launch_screen.xml：（layout不存在自己手動創建）

<?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/launch_image">
</LinearLayout>

// 只需要注意  android:background="@drawable/launch_image"這行， launch_image是你啟動圖片的名字

 

步驟四，通過工具制作好不同規格的啟動頁圖片 ，放進 android\app\src\main\res\drawable 文件夾下 （drawable文件夾不存在，則手動創建）

 

 

步驟五：成上述操作后，重新打包應用，再啟動時就可以看到啟動頁了。不過，啟動頁顯示之前會有短暫的白屏，我們可以通過設置透明背景來處理。編輯 android/app/src/main/res/values/styles.xml 文件，修改如下：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
+        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

 

步驟六：隱藏啟動頁
到目前為止，可以發現打開 APP 后會一直停留在啟動頁面，我們可以在合適的時機（如所有資源准備完畢）調用 SplashScreen.hide(); 來隱藏啟動頁。

 

// index.js文件操作
import { AppRegistry } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => {
  SplashScreen.hide();
  return App;
});