React Native 設置APP名稱、logo圖標、啟動頁
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; });
浙公網安備 33010602011771號