Question

我是本机反应的新手。

我正在用与Android手机在USB端口连接到我的笔记本电脑的本机做出一个项目。当我运行项目时，我在手机上看到一个空白屏幕。我的手机是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>
)
})

有人可以帮忙吗？

Answer 1

如果rootStore不存在，则渲染方法返回null，因此页面将为空白。试试这个：

if (!rootStore) {
    console.log('rootStore is not found');
    return null
}
console.log('continue to render');

如果在Metro服务器窗口中没有看到continue to render打印出来，则表明未找到rootStore。然后，您需要弄清楚为什么它不存在，或者至少显示某种信息性的视图来处理这种情况。

Answer 2

我替换为：

<RootStoreProvider value={rootStore}>
        <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
            <ThemeProvider theme={theme}>
                <RootNavigator
                    ref={navigationRef}
                    initialState={initialNavigationState}
                    onStateChange={onNavigationStateChange}
                />
            </ThemeProvider>
        </SafeAreaProvider>
    </RootStoreProvider>

与

<SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
        <AuthScreensWelcomeScreen />
    </SafeAreaProvider>

使空白的白色屏幕消失。请告诉我这是否是正确的方法。

如何在React Native项目中删除我的Android手机中的空白屏幕？

2 个答案: