将 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 是异步函数，它需要很少的时间来 return 响应，但 LoadingScreen return 立即响应，这就是它显示空白屏幕的原因。所以，这是解决方案

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;

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

Storing JSX code in a variable and rendering it?

javascript

react-native

react-native-navigation