React native 无法注销带有嵌套导航器的react本机应用程序？

我在登录react native时遇到问题。我想这与我的导航嵌套有关，下面是我的App.js：

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();




export default class App extends React.Component {

  state = {
    loggedIn: false
  }

  // componentDidMount() {
  //   Firebase.auth().onAuthStateChanged((user) => {
  //     if (user) {
  //       this.setState({ loggedIn: true })
  //     } else {
  //       this.setState({ loggedIn: false })
  //     }
  //   })
  // }

  render() {
    return (
      <Provider store = {store}>
        <NavigationContainer>
    
          <Stack.Navigator headerMode="none" initialRouteName="Login">
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Signup" component={Signup} />
            <Stack.Screen name="Tabs" component={Tabs} />
          </Stack.Navigator>
  
        </NavigationContainer>
      </Provider>
  
      
    );
  } 
}

function Tabs() {
  return (

    <Tab.Navigator
    initialRouteName="Home"
    activeColor="#161F3D"
    inactiveColor="#B8BBC4">

      <Tab.Screen 
        name="Home" 
        component={Home} 
        // options={{
        //   tabBarIcon: <Icon name="home" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Leaderboard" 
        component={Leaderboard} 
        // options={{
        //   tabBarIcon= <Icon name="trophy" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Create" 
        component={Create} 
        // options={{
        //   tabBarIcon= <Icon name="add" size={40} />
        // }}
      />

      <Tab.Screen 
        name="Notifications" 
        component={Notification} 
        // options={{
        //   tabBarIcon= <Icon name="notifications-circle-outline" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Profile"
        component={Profile}
        // options={{
        //   tabBarIcon= <Icon name="person" size={24} />
        // }} 
      />

    </Tab.Navigator>


    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const Stack=createStackNavigator（）；
const Tab=createBottomTabNavigator（）；
导出默认类App扩展React.Component{
状态={
洛格丁：错
}
//componentDidMount（）{
//Firebase.auth（）.onAuthStateChanged（（用户）=>{
//如果（用户）{
//this.setState（{loggedIn:true}）
//}其他{
//this.setState（{loggedIn:false}）
//     }
//   })
// }
render（）{
返回(
);
} 
}
函数选项卡（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

如您所见，我将我的身份验证（登录和注册）作为两个路由，然后将“选项卡”作为另一个路由传递。“我的选项卡导航器”包含“配置文件”页面，其中有一个“注销”按钮。个人资料页：

class Profile extends React.Component {
    
    constructor(props) {
        super(props)
        this.state = {
            user: this.props.user
        }
        
    }
    
    logOut() {
        try {
            // this.props.clearUser()
            Firebase.auth()
            .signOut()
            .then(() => this.props.navigation.navigate('Login'))
           
       }
       catch(error) {
           console.log(error);
       }
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity 
                    onPress={this.logOut}>
                    <Text>Sign out Change your logout function to an arrow function that it will have access to 'this'

logOut=()=> {
    try {
        // this.props.clearUser()
        Firebase.auth()
        .signOut()
        .then(() => this.props.navigation.navigate('Login'))
       
   }
   catch(error) {
       console.log(error);
   }
}

类配置文件扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户：this.props.user
}
}
注销（）{
试一试{
//this.props.clearUser（）
Firebase.auth（）
.signOut（）
。然后（（）=>this.props.navigation.navigate（'Login'））
}
捕获（错误）{
console.log（错误）；
}
}
render（）{
返回(
注销将您的注销功能更改为箭头功能，它将访问“this”

哈哈哈，真不敢相信这么简单。干杯，导航中的所有屏幕都可以访问“导航”道具，因此在更改后它应该可以工作。这就是为什么我如此困惑的原因。这非常有效-谢谢，我会在7分钟内将其标记为正确。还有一些原因等待啊，没问题：）