React NativeプロジェクトでAndroid携帯の空白の白い画面を削除するにはどうすればよいですか？

私はreact-nativeに不慣れです。

私は、USBポートでラップトップに接続されたAndroidフォンとreact-nativeでプロジェクトを作成しています。プロジェクトを実行すると、電話に空白の画面が表示されます。私の電話はAndroidバージョン9です。

最初に走ったnpm start後、走ったnpm run android。

adb -s device-name reverse tcp：8081 tcp：8081を実行しました。それでも私の電話の画面は空白です。

これは私のApp.tsxファイルです：

import "./i18n"
import React, { useState, useEffect, useRef } from "react"
import { YellowBox } from "react-native"
import { NavigationContainerRef } from "@react-navigation/native";
import { contains } from "ramda"
import { enableScreens } from "react-native-screens"
import { SafeAreaProvider, initialWindowSafeAreaInsets } from "react-native-safe-area-context";

import { RootNavigator, exitRoutes, setRootNavigation } from "./navigation" 
import { useBackButtonHandler } from "./navigation/use-back-button-handler"
import { RootStore, RootStoreProvider, setupRootStore } from "./models/root-store"
import * as storage from "./utils/storage"
import getActiveRouteName from "./navigation/get-active-routename"
import { ThemeProvider } from 'react-native-elements';
import * as theme from 'theme';
import { AuthScreensWelcomeScreen } from './screens/auth-screens/welcome-screen';

enableScreens()

YellowBox.ignoreWarnings([
"componentWillMount is deprecated",
"componentWillReceiveProps is deprecated",
"Require cycle:",
])

const canExit = (routeName: string) => contains(routeName, exitRoutes)

export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"

const App: React.FunctionComponent<{}> = () => {
const navigationRef = useRef<NavigationContainerRef>()
const [rootStore, setRootStore] = useState<RootStore | undefined>(undefined)
const [initialNavigationState, setInitialNavigationState] = useState()
const [isRestoringNavigationState, setIsRestoringNavigationState] = useState(true)

setRootNavigation(navigationRef)
useBackButtonHandler(navigationRef, canExit)

    const routeNameRef = useRef()
    const onNavigationStateChange = state => {
    const previousRouteName = routeNameRef.current
    const currentRouteName = getActiveRouteName(state)

    if (previousRouteName !== currentRouteName) {
        // track screens.
        __DEV__ && console.tron.log(currentRouteName)
    }

    // Save the current route name for later comparision
    routeNameRef.current = currentRouteName

    // Clear the storage if we are navigating to auth stack
    if ( ['register', 'login', 'forgotpassword'].includes(currentRouteName) ) {
        storage.remove(NAVIGATION_PERSISTENCE_KEY);
    } else {
        // Persist navigation state to storage
        storage.save(NAVIGATION_PERSISTENCE_KEY, state)
    }
}

useEffect(() => {
    (async () => {
        setupRootStore().then(setRootStore)
    })()
}, [])

useEffect(() => {
    const restoreState = async () => {
        try {
            const state = await storage.load(NAVIGATION_PERSISTENCE_KEY)

            if (state) {
                setInitialNavigationState(state)
            }
        } finally {
            setIsRestoringNavigationState(false)
        }
    }

    if (isRestoringNavigationState) {
        restoreState()
    }
}, [isRestoringNavigationState])

if (!rootStore) {
    return null
}

return (
    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
        <AuthScreensWelcomeScreen />
    </SafeAreaProvider>
)
}

export default App

表示されるウェルカム画面は次のとおりです。

import React, { FunctionComponent, useState } from "react"
import { observer } from "mobx-react-lite"
import { Dimensions, Image } from "react-native"
import { Screen, Button } from "components"
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Block } from "components/block/block"
const { width: ScreenWidth } = Dimensions.get('screen');
import { NavigationProp, NavigationState } from "@react-navigation/native";

export interface AuthScreensWelcomeScreenProps {
navigation?: NavigationProp<Record<string, object>, string, NavigationState, 
{}, {}>
}

export const AuthScreensWelcomeScreen: 
FunctionComponent<AuthScreensWelcomeScreenProps> = observer((props) => {

const {
    navigation
} = props;
const [activeSlide, setActiveSlide ] = useState(0);

const items = [
    { image: require('../../../assets/splash1.jpg') },
    { image: require('../../../assets/splash2.jpg') },
    { image: require('../../../assets/splash3.jpg') }
];

function renderItem ( { item, index } ) {
    return (
        <Image style={{ alignSelf: 'center', flex: 1, resizeMode: 'contain', width: ScreenWidth / 1.25 }} source={item.image}></Image>
    )
}

return (
    <Screen preset="fixed">
        <Block flex>
            <Carousel
                sliderWidth={ScreenWidth}
                itemWidth={ScreenWidth}
                data={ items }
                layout="default"
                renderItem={ renderItem }
                onSnapToItem={ index => { setActiveSlide( index ) } }/>
            <Block>
                <Pagination 
                    activeDotIndex={activeSlide}
                    dotsLength={items.length} 
                    dotStyle={{
                        width: 10,
                        height: 10
                    }}/>
            </Block>
        </Block>
        <Block row my={20} space="evenly" px={20}>
            <Button title="Continue" containerStyle={{ flex: 1 }} onPress={ ( ) => navigation.navigate('login') }/>
        </Block>
    </Screen>
)
})

誰か助けてもらえますか？