Reactjs 实现自定义路由器后出现白色屏幕

首先，我将解释我的问题，我创建了3个屏幕。 主页、登录、注册

我尝试实现firebase身份验证。如果用户已连接->主页，如果未连接->欢迎（欢迎有两个按钮，登录和注册）

我没有任何错误，现在Routes.js中的是空的

代码如下：

import { useEffect } from "react";
import { useContext, useState } from "react"
import { AuthContext } from "./providers/AuthProvider"

const Routes = () => {
    const [user, setUser] = useContext(AuthContext);
    const [initializing, setInitializing] = useState(true);

    const onAuthstateChanged = (user) => {
        setUser(user);
        if(initilizing) setInitializing(false);
    }

    useEffect(() => {
        const subscriber = auth().onAuthstateChanged(onAuthstateChanged);
        return subscriber;
    }, []);

    if(initializing) return null

    return (
        user ? this.props.navigation.navigate('Home') : this.props.navigation.navigate('Intro')
    )
}

export default Routes;

import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const [user, setUser] = useState(null);

    return (
        <AuthContext.Provider
            value={{
                user,
                setUser,
                login: async (email, password) => {
                    try {
                        await auth().signInWithEmailAndPassword(email, password)
                    } catch(error) {
                        console.log(error)
                    }
                },
                register: async (email, password) => {
                    try {
                        await auth().createUserWithEmailAndPassword(email, password);
                    } catch (error) {
                        console.log(error)
                    }
                },
                logout: async () => {
                    try {
                        await auth().signOut();
                    } catch (error) {
                        this.setState({
                            errorMsg: translation(error.code)
                        })
                    }
                }
            }}
        >
            {children}
        </AuthContext.Provider>
    )
}

我的App.js的代码

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Welcome from './src/screens/account/Welcome';
import Intro from './src/screens/Intro';
import Home from './src/screens/Home';
import Login from './src/screens/account/Login';
import Register from './src/screens/account/Register';
import { Routes } from './src/Routes';

import { Dimensions, StatusBar, View } from 'react-native'
import { AuthProvider } from './src/providers/AuthProvider';

export default class App extends React.Component {
  render() {  
    {
      return (
        <View style={{paddingTop: STATUSBAR_HEIGHT, flex: 1}}>
          <AuthProvider>
            <StatusBar translucent />
            <NavigationContainer>
              <Stack.Navigator initialRouteName="Routes">
                <Stack.Screen name="Routes" component={Routes} options={{gestureEnabled: false}} />
                <Stack.Screen name="Intro" component={Intro} options={{gestureEnabled: false}} />
                <Stack.Screen name="Welcome" component={Welcome} options={{gestureEnabled: false}} />
                <Stack.Screen name="Home" component={Home} />
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Register" component={Register} />
              </Stack.Navigator>
            </NavigationContainer>    
          </AuthProvider>
        </View>    
      )
    }
  }
}

const STATUSBAR_HEIGHT = StatusBar.currentHeight;

const Stack = createStackNavigator();

从“React”导入React；
导入“反应本机手势处理程序”；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/src/screens/account/Welcome”导入欢迎；
从“/src/screens/Intro”导入简介；
从“/src/screens/Home”导入主页；
从“/src/screens/account/Login”导入登录名；
从“./src/screens/account/Register”导入注册表；
从“./src/Routes”导入{Routes}；
从“react native”导入{维度、状态栏、视图}
从“./src/providers/AuthProvider”导入{AuthProvider}；
导出默认类App扩展React.Component{
render（）{
{
返回(
)
}
}
}
const STATUSBAR_HEIGHT=STATUSBAR.currentHeight；
const Stack=createStackNavigator（）；

立即执行此错误：对不可重写实例进行分解的尝试无效。要使其可编辑，非（数组）对象必须具有Symbol.iterator方法

代码如下：

import { useEffect } from "react";
import { useContext, useState } from "react"
import { AuthContext } from "./providers/AuthProvider"

const Routes = () => {
    const [user, setUser] = useContext(AuthContext);
    const [initializing, setInitializing] = useState(true);

    const onAuthstateChanged = (user) => {
        setUser(user);
        if(initilizing) setInitializing(false);
    }

    useEffect(() => {
        const subscriber = auth().onAuthstateChanged(onAuthstateChanged);
        return subscriber;
    }, []);

    if(initializing) return null

    return (
        user ? this.props.navigation.navigate('Home') : this.props.navigation.navigate('Intro')
    )
}

export default Routes;

import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const [user, setUser] = useState(null);

    return (
        <AuthContext.Provider
            value={{
                user,
                setUser,
                login: async (email, password) => {
                    try {
                        await auth().signInWithEmailAndPassword(email, password)
                    } catch(error) {
                        console.log(error)
                    }
                },
                register: async (email, password) => {
                    try {
                        await auth().createUserWithEmailAndPassword(email, password);
                    } catch (error) {
                        console.log(error)
                    }
                },
                logout: async () => {
                    try {
                        await auth().signOut();
                    } catch (error) {
                        this.setState({
                            errorMsg: translation(error.code)
                        })
                    }
                }
            }}
        >
            {children}
        </AuthContext.Provider>
    )
}

import React，{createContext，useState}来自“React”；
从'@react native firebase/auth'导入身份验证；
export const AuthContext=createContext（）；
导出常量AuthProvider=（{children}）=>{
const[user，setUser]=useState（null）；
返回(
{
试一试{
等待auth（）。使用email和password进行登录（电子邮件，密码）
}捕获（错误）{
console.log（错误）
}
},
注册：异步（电子邮件、密码）=>{
试一试{
等待auth（）.createUserWithEmailAndPassword（电子邮件，密码）；
}捕获（错误）{
console.log（错误）
}
},
注销：异步（）=>{
试一试{
等待身份验证（）。注销（）；
}捕获（错误）{
这是我的国家({
errorMsg:translation（error.code）
})
}
}
}}
>
{儿童}
)
}

您导出一个默认值，并尝试导入一个不存在的命名导出。您能告诉我应该怎么做吗？JS新手（来自后端php）我更改了导入{Routes}从“/src/Routes”导入路由；从“/src/Routes”导入路由；我仍然有一个带有icon.png的白色屏幕。除此之外，我没有视图调用图标。pngyu必须检查JS日志等。这很可能（但肯定不确定）这里有一个JS问题——检查所有输入，开始对分代码，看看如果无法通过手动检查发现，是否可以缩小范围。我在应用程序和控制台中没有错误。