Блог

Я начал изучать React Native и работать над проектом. Но я столкнулся с небольшой проблемой в app.js файл (точно не знаю). Я создал текстовый предварительный загрузчик, но всякий раз, когда я запускаю этот проект, я вижу, что предварительный загрузчик не может просматривать ничего, кроме этого предварительного загрузчика.

Я добавил свой app.js код ниже, пожалуйста, помогите мне с этой проблемой.

App.js

 import { StatusBar } from 'expo-status-bar';
import React, {Component } from 'react';
import { View, Text } from 'react-native';
import * as firebase from 'firebase'


// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "<API-KEY>",
  authDomain: "bodytutors-61db0.firebaseapp.com",
  databaseURL: "https://bodytutors-61db0-default-rtdb.firebaseio.com",
  projectId: "bodytutors-61db0",
  storageBucket: "bodytutors-61db0.appspot.com",
  messagingSenderId: "65663399714",
  appId: "1:65663399714:web:cabaa1fc311e7d8c59977b",
  measurementId: "G-PMCW2HMY8B"
};

if(firebase.apps.length === 0){
  firebase.initializeApp(firebaseConfig)
}

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

import LandingScreen from './components/auth/Landing.js'
import RegisterScreen from './components/auth/Register.js';


const Stack = createStackNavigator();

export class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      loaded: false,
    }
  }


  componentDidMount(){
    firebase.auth().onAuthStateChanged((user) => {
      if(!user){
        this.state({
          loggedIn: false,
          loaded: true,
        })
      }else {
        this.state({
          loggedIn: true,
          loaded: true,
         })
        }
    })
  }
  render() {
    const { loggedIn, loaded } = this.state;
    if(!loaded){
      return(
        <View style={{ flex: 1, justifyContent: 'center'}}>
          <Text>Loading</Text>
        </View>
      )
    }
    
    if(!loggedIn){
      
    return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen name="Landing" component={LandingScreen} options={{ headerShown: false }} />
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );
    }

    return(
      <View style={{ flex: 1, justifyContent: 'center'}}>
        <Text>User is Logged In</Text>
      </View>
    )
  }
}

export default App
 

Ссылка на видео

https://www.youtube.com/watch?v=1hPgQWbWmEkamp;t=3073s

введите описание изображения здесь

Ваша проблема в том, что вы пытаетесь обновить состояние с помощью состояния «get».

Изменить

 this.state({loggedIn: true, loaded: true,});
 

Для

 this.setState({ loggedIn: true, loaded: true});
 

Вторая форма — это правильный способ обновления состояния. Изменив это, вы могли бы просто перейти к другому if.