React Native 使用 Expo 加载标志问题答案

【问题标题】：React Native using Expo Loading Sign IssueReact Native 使用 Expo 加载标志问题
【发布时间】：2021-01-21 10:55:02
【问题描述】：

我已经开始学习 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=1hPgQWbWmEk&t=3073s

enter image description here

【问题讨论】：

尝试将this.state({loggedIn: true, loaded: true,}) 的分配更改为this.setState({ loggedIn: true, loaded: true});，因为您正在尝试从该道具分配一个新值，但这不是这样做的方法。这就是为什么你不能传递给另一个 if。
非常感谢它现在正在运行
我要把这个评论放在一个答案上，你介意接受吗？ :D

标签： javascript firebase react-native expo

【解决方案1】：

您的问题是您正在尝试使用“获取”状态更新状态。

改变

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

到

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

第二种形式是更新状态的正确方法。改变它，你可以传递给另一个 if。

【讨论】：