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 个之后，我无法解决我的问题。如何在我的标签导航器中访问导航，以便当我按下注销之类的按钮时，它会重定向到登录屏幕？

标签： react-nativeexporeact-navigation

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

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

问题描述

解决方案

推荐阅读