React Native 應用上架前的準備工作

android {
    ...
    defaultConfig {
        applicationId "com.test.pokedex"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 3
        versionName "1.0.2"
    }
    ...
}

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.test.pokedex">
	...
</manifest>

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  ...
</application>

npm i react-native-splash-screen --save

import SplashScreen from 'react-native-splash-screen'

const App = () => {
  useEffect(() => {
    const ac = new AbortController()

    setTimeout(() => {
      SplashScreen.hide()
    }, 3000)

    return () => ac.abort()
  }, [])
	
  ..
}

export default App

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/splashscreen_bg"/>
    <item
        android:width="300dp"
        android:height="300dp"
        android:drawable="@mipmap/launch_screen"
        android:gravity="center" />
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashscreen_bg">#FFFFF8</color>
	<color name="app_bg">#f2f2f2</color>
</resources>

<resources>

    <em><!-- Base application theme. --></em>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <em><!-- Customize your theme here. --></em>
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <em><!-- Add the following line to set the default status bar color for all the app. --></em>
        <item name="android:statusBarColor">@color/app_bg</item>
        <em><!-- Add the following line to set the default status bar text color for all the app 
        to be a light color (false) or a dark color (true) --></em>
        <item name="android:windowLightStatusBar">false</item>
        <em><!-- Add the following line to set the default background color for all the app. --></em>
        <item name="android:windowBackground">@color/app_bg</item>
    </style>

    <em><!-- Adds the splash screen definition --></em>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.test.pokedex">

    ...

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/SplashTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
          <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
      </activity>
    </application>
</manifest>

package com.test.pokedex; <em>// Change this to your package name.</em>

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

...
import android.os.Bundle; <em>// 1.</em>
import org.devio.rn.splashscreen.SplashScreen; <em>// 2.</em>

public class MainActivity extends ReactActivity {
  ...
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); <em>// 3.</em>
        super.onCreate(savedInstanceState);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

...
#import "RNSplashScreen.h" <em>// Add this</em>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...

  [super application:application didFinishLaunchingWithOptions:launchOptions];
  [RNSplashScreen show];

  return YES;
}
...

{
  "expo": {
    ...
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    ...
}

npx expo install expo-splash-screen

import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';

<em>// Keep the splash screen visible while we fetch resources</em>
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        <em>// Pre-load fonts, make any API calls you need to do here</em>
        await Font.loadAsync(Entypo.font);
        <em>// Artificially delay for two seconds to simulate a slow loading</em>
        <em>// experience. Please remove this if you copy and paste the code!</em>
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        <em>// Tell the application to render</em>
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      <em>// This tells the splash screen to hide immediately! If we call this after</em>
      <em>// `setAppIsReady`, then we may see a blank screen while the app is</em>
      <em>// loading its initial state and rendering its first pixels. So instead,</em>
      <em>// we hide the splash screen once we know the root view has already</em>
      <em>// performed layout.</em>
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
      onLayout={onLayoutRootView}>
      <Text>SplashScreen Demo! 👋</Text>
      <Entypo name="rocket" size={30} />
    </View>
  );
}

<resources>
    ...

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.test.pokedex">

    ...

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/SplashTheme">
      ...
    </application>
</manifest>