将 JSX 代码存储在变量中并渲染它？

Question

我正在创建一个欢迎屏幕，用户可以在其中决定是否要登录或注册。使用 Firebase 的 onAuthStateChanged，我可以检查用户是否已经在此应用上签名（这种“是否登录”状态的持久性是本地的：即使用户在未注销的情况下关闭应用，他们仍然会登录）。

如果用户已经登录而没有呈现（或显示）任何内容，我只想自动将用户导航到主屏幕（在我的 stackNavigator 中）。我该怎么做？

由于我是初学者，我的第一个想法是有条件地执行此操作：屏幕返回的内容将存储在名为 content 的变量中，默认情况下为 null。如果用户已登录（由 onAuthStateChanged 块测试），它将自动导航到主屏幕。如果用户未登录，则内容将是一个 JSX 组件（包含两个按钮：一个用于注册，一个用于登录。这些按钮都导航到相应的屏幕）

到目前为止，这还没有奏效，我的屏幕只是空白。我的代码如下：

import React, { useEffect } from 'react';
import { View} from 'react-native';
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig"

const LoadingScreen = props => {
  let content = null;
  Firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      console.log("User Signed in")

      props.navigation.navigate("Home");
    }else{
      content = (<WelcomeButtons onSignUpPress = {() => props.navigation.navigate("Register")}
      onSignInPress = {() => props.navigation.navigate("Login")}/>);
      console.log("User not signed in")
    }
  });
  
  
    
    return(
      <View>
      {content}
      </View>
    );
}


export default LoadingScreen;

欢迎任何方法，如果用户在任何渲染之前（或至少在显示任何内容之前）登录，我只需要导航到主屏幕

Answer 1

Firebase.auth().onAuthStateChanged 是异步函数，它需要一些时间来返回响应，但 LoadingScreen 会立即返回响应，这就是它显示空白屏幕的原因。 所以，这里是解决方案

import React, { useEffect, useState } from 'react';
import { View,ActivityIndicator} from 'react-native';
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig"

const LoadingScreen = props => {
const [loading, setLoading] = useState(true);
let content = <ActivityIndicator />;
useEffect(() => {
Firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          setLoading(false);
          console.log("User Signed in")
          props.navigation.navigate("Home");
        }else{
          setLoading(false);
          content = (<WelcomeButtons onSignUpPress = {() => 
           props.navigation.navigate("Register")}
          onSignInPress = {() => props.navigation.navigate("Login")}/>);
          console.log("User not signed in")
        }
      });
  });               
return(
      <View>
      {content}
      </View>
    );
    }
export default LoadingScreen;