Блог

У меня возникли проблемы с выходом из 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',
  },
});
  

Как вы можете видеть, у меня есть авторизация (вход и регистрация) в виде двух маршрутов, затем я передаю «вкладки» в качестве другого маршрута. Мой навигатор вкладок содержит страницу профиля, где у меня есть кнопка выхода из системы. Страница профиля:

 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 🤷 {this.state.user.username}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Profile);
  

Когда я нажимаю кнопку выхода на странице своего профиля, я получаю эту ошибку:

 undefined is not an object (evaluating '_this2.props')
  

Итак, я предполагаю, что на странице моего профиля нет доступа к навигации. Есть куча вопросов, которые были заданы по поводу ошибки, и после попытки 10 из них я не смог решить свою проблему. Как я могу получить доступ к навигации в моем навигаторе вкладок, чтобы при нажатии кнопки, подобной logout, она перенаправлялась на экран входа в систему?

Измените свою функцию выхода на функцию со стрелкой, чтобы у нее был доступ к «этому»

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