react-native - 如何在 Vue Native 中执行 onAuthStateChanged？

Question

我想执行与此等效的操作：

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>
    );
  }
}

我已经设置了我的路线以通过 Loading 来检查用户的身份验证状态，然后再继续执行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>

当我在上面运行此代码时，我得到一个白屏。

Answer 1

也许我们应该将挂载的代码移动到一个方法中。

<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>