Блог

Я хочу выполнить что-то эквивалентное этому:

 export default class LoadingScreen extends React.Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? 'App' : 'Auth');
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Loading</Text>
        <ActivityIndicator size='large'></ActivityIndicator>
      </View>
    );
  }
}
 

Я настроил свои маршруты так, чтобы они проходили через загрузку, чтобы проверить состояние авторизации пользователя, прежде чем перейти к либо Auth или App . Когда я добавляю mounted() , загружаемый текст и индикатор активности не отображаются.

  <template>
      <view class="container">
        <nb-text>Loading</nb-text>
        <activity-indicator size="large" color="#0000ff" />
      </view>
    </template>
    
    <script>
    import firebase from "firebase";
    import Fire from "./../../api/firebaseAPI";
    
    export default {
      // Declare `navigation` as a prop
      props: {
        navigation: {
          type: Object,
        },
      },
      async mounted() {
        await firebase.auth().onAuthStateChanged(function (user) {
            this.navigation.navigate(user ? "App" : "Auth");
        });
      },
    };
    </script>
 

Когда я запускаю этот код выше, я получаю белый экран.

Может быть, нам следует переместить код в смонтированный метод.

 <script>
mounted(){
this.checkAuth()
},
...
methods:{
async checkAuth(){
await firebase.auth().onAuthStateChanged(function (user) {
          if(user){
this.navigation.navigate("Auth")
}else{

this.navigation.navigate("App")
}
        });
}

}
</script>