javascript - 根容器上的 setState() 不保留 react 导航的路线(V3)

Question

我有一个根组件(应用程序)，它呈现代码中所示的嵌套导航。 在应用程序内部，我有由所有子对象使用的用户对象(存储在状态中)。它包含有关您所在群组的信息。

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user: null
        }
    }
    render() {
        if (!this.state.user) {
            // from the login component, I make an API call to my backend.
            // If the user logs in, I do app.setState({user: loggedInUser}) from inside the LoginComponent
            return <LoginComponent app={this} />
        }
        return createAppContainer(createSwitchNavigator({
            MainApp: {
                screen: createBottomTabNavigator({
                    StartPage: {
                        screen: ({ navigation }) => {
                            return <StartPage navigation={navigation} app={this} />
                        }
                    },
                    Groups: {
                        screen: createStackNavigator({
                            ListGroups: {
                                // When clicking on a Group from the GroupsPage, I execute:
                                // this.props.navigation.navigate('GroupDetail', { group, app })
                                // (from inside the GrousPage screen)
                                screen: ({ navigation }) => <GroupsPage navigation={navigation} app={this} />
                            },
                            GroupDetail: {
                                // Inside the GroupDetail, you can leave or join a group.
                                // If you do that, I'm making an API call and get the new user object.
                                // Then, I do this.props.navigation.getParam('app').setState({user: newUser})
                                // "app" was passed from ListGroups
                                screen: GroupDetail
                            }
                        })
                    }
                })
            }
        }))
    }
}

现在，当我想设置更新的用户(通过 app.setState({user: newUser}) 从 GroupDetail )时，导航不会保留其路线并返回到首页。 但是，我想要的是使用新用户重新渲染 GroupDetail。

我怎样才能保持导航状态？或者您认为我有设计缺陷并且有修复它的想法吗？谢谢!

(是的，我想将用户对象仅保留在 App 内部并将其传递下去。主要原因是只有很少的 API 调用)

Answer 1

您不应在身份验证时创建新的导航器，而应向导航器添加一条路由，这将是您的默认路由，并且该路由将负责您的登录。

应该传递一个回调来设置用户，如下所示:

setUser = user => this.setState({user});
return <AuthPage setUser={this.setUser} /> // You also don't have to pass navigation. It will be passed automatically.

在 AuthPage 中，您可以设置用户

this.props.setUser(newUser);

并使用导航 Prop 导航到您想要的路线，或者只是返回到上一个路线:

this.props.navigation.navigate('App');
Or this.props.navigation.goBack();

要保持用户登录状态，您应该检查用户是否在您的身份验证路由中登录并做出相应 react :

componentDidMount() {
    const user = getUser(); // This depends on how you persist the user
    this.props.navigation.navigate(user ? 'App' : 'Auth');
}

希望这有帮助。