React Native的Splash Screen自定義

在React Native中自定義啟動畫面（Splash Screen）通常涉及以下幾個步驟：

1. 創建啟動畫面組件：首先，你需要創建一個啟動畫面的組件。這個組件可以包含任何你希望在應用啟動時顯示的內容，比如應用的logo、名稱、版本號等。
2. 處理應用生命周期：在React Native中，你可以使用App組件的生命周期方法來處理啟動畫面的顯示。具體來說，你可以在componentDidMount方法中顯示啟動畫面，并在應用準備好后隱藏它。
3. 處理應用狀態：你可能還需要根據應用的狀態來決定是否顯示啟動畫面。例如，如果你的應用在啟動時需要加載數據，那么你可能希望在數據加載完成后再顯示啟動畫面。
4. 處理設備旋轉：如果你的應用支持橫屏和豎屏切換，你可能還需要處理設備旋轉的情況，以確保啟動畫面在不同屏幕尺寸下都能正確顯示。

下面是一個簡單的示例代碼，展示了如何在React Native中自定義啟動畫面：

import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

class SplashScreen extends Component {
  state = {
    isLoading: true,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 2000); // 設置2秒的加載時間
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Welcome to My App!</Text>
        </View>
      );
    }
  }
}

export default SplashScreen;

在這個示例中，我們創建了一個名為SplashScreen的組件，它包含一個ActivityIndicator用于顯示加載動畫。在componentDidMount方法中，我們設置了一個2秒的定時器，用于模擬應用的加載過程。當定時器到期時，我們將isLoading狀態設置為false，從而隱藏啟動畫面并顯示應用的歡迎信息。

請注意，這只是一個簡單的示例，你可能需要根據你的具體需求進行調整。例如，你可能需要根據應用的狀態來動態顯示或隱藏啟動畫面，或者根據設備的屏幕尺寸來調整啟動畫面的布局。