Хранить код JSX в переменной и отображать его? - PullRequest
Новая
       110

Хранить код JSX в переменной и отображать его?

0 голосов
/ 07 августа 2020

Я создаю экран приветствия, где пользователь может решить, хочет ли он войти в систему или зарегистрироваться. Используя onAuthStateChanged в Firebase, я могу проверить, подписался ли пользователь уже в этом приложении (сохранение этого состояния «вошел в систему или нет» является локальным: даже если пользователь закроет приложение без выхода, он все равно войдет в систему).

Я просто хочу автоматически перемещать пользователя на главный экран (в моем 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;

Любой подход приветствуется, мне просто нужно перейти на главный экран, если пользователь вошел в систему до любых визуализаций (или, по крайней мере, до отображения чего-либо)

1 Ответ

0 голосов
/ 09 августа 2020

Firebase.auth (). OnAuthStateChanged - это функция asyn c, и для возврата ответа требуется немного времени, но ответ 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;
...