firebase-React Native 项目上的元素类型错误

Question

我是编码新手，正在制作一个 firebase-react 原生应用。我想知道的是该应用程序在用户尚未登录时向他们显示登录屏幕，如果他们已登录则显示应用程序屏幕但是当我尝试运行该应用程序时，它给了我下图所示的错误.我做错了什么？谢谢。

/**
 * @format
 */
import React, { Component } from 'react'
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';
import {name as appName} from './app.json';
import App from './component/App'
import * as firebase from 'firebase'
import Login from './component/Login'
//import Firebase from './lib/Firebase'

const firebaseConfig = {
    apiKey: "dhshdsjkfbsdjkvbjksdvbjksd",
    authDomain: "dhshdsjkfbsdjkvbjksdvbjksd",
    databaseURL: "dhshdsjkfbsdjkvbjksdvbjksd",
    projectId: "dhshdsjkfbsdjkvbjksdvbjksd",
    storageBucket: "dhshdsjkfbsdjkvbjksdvbjksd",
    messagingSenderId: "dhshdsjkfbsdjkvbjksdvbjksd",
    appId: "dhshdsjkfbsdjkvbjksdvbjksd",
    measurementId: "dhshdsjkfbsdjkvbjksdvbjksd"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

export default class dribbleAppUi1 extends Component {
    constructor(props){
        super(props)
        this.state = {
            initialView : null,
            userLoaded: false
        }
        this.getInitialView()
        this.getInitialView = this.getInitialView.bind(this)
    }

    getInitialView (){
        firebase.auth().onAuthStateChanged((user) => {
            let initialView = user ? 'App' : 'Login'

            this.setState({
                userLoaded: true,
                initialView
            })
        })  
    }

    configureScene(route) {
        if(route.sceneConfig) {
            return route.sceneConfig
        } else {
            return ({
                ...Navigator.sceneConfigs.HorizontalSwipeJumpFromRight,
                gestures: {}
            })
        }
    }

    
    renderScene(route, navigator){
        var globalProps = {navigator}
        switch(route.id){
            case 'App':
                return (
                    <App navigator={navigator} />
                )
                case 'Login':
                    return (
                        <Login navigator={navigator} />
                    )
        }
    }
    render() {
        if(this.state.userLoaded) {

            return (
                <Navigator
                  initialRoute={{
                      id: this.state.initialView
                  }}
                  renderScene={this.renderScene}
                  configureScene={this.configureScene}
                  />
            );

        }else {
            return null
        }
       
    }
}


AppRegistry.registerComponent('Tiismo', () => dribbleAppUi1);

我正在尝试使用 firebase 制作一个项目并做出原生反应。现在，如果没有登录，我试图让用户登录页面，但我在下图中收到错误。我做错了什么？谢谢。

Answer 1

您不能简单地在渲染中返回 null。试试这个。

 if(this.state.userLoaded) {

        return (
            <Navigator
              initialRoute={{
                  id: this.state.initialView
              }}
              renderScene={this.renderScene}
              configureScene={this.configureScene}
              />
        );

    }else {
        return (<Text>Loading</Text>)
    }