У меня есть корневой компонент (приложение), который отображает вложенную навигацию, как показано в коде. Внутри приложения у меня есть пользовательский объект (хранится в состоянии), который используется всеми дочерними объектами. Он содержит информацию о группах, в которых вы находитесь.
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
}
})
}
})
}
}))
}
}
Теперь, когда я хочу установить обновленного пользователя (из GroupDetail через app.setState({user: newUser})), навигация не сохраняет свой маршрут и возвращается к StartPage. Однако, вместо этого я хотел перерисовать GroupDetail с новым пользователем.
Как я смогу сохранить состояние навигации? Или вы думаете, у меня есть недостаток дизайна и есть идеи по его устранению? Спасибо!
(Да, я бы хотел, чтобы пользовательский объект оставался только внутри приложения и передавался по нему. Основная причина - иметь только несколько вызовов API)
2 ответа
Согласно документации, вы должны сохранить состояние навигации пользователя.
Подробнее здесь.
Вы не должны создавать новый навигатор при аутентификации, а вместо этого добавить маршрут к своему навигатору, который будет вашим маршрутом по умолчанию, и этот маршрут будет заботиться о вашем логине.
Должен быть передан обратный вызов, чтобы установить пользователя следующим образом:
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);
И перейдите к нужному маршруту с помощью навигационной стойки или просто вернитесь к предыдущему маршруту:
this.props.navigation.navigate('App');
Or this.props.navigation.goBack();
Для того, чтобы пользователь вошел в систему, вы должны проверить, вошел ли пользователь в ваш маршрут Auth, и соответственно отреагировать:
componentDidMount() {
const user = getUser(); // This depends on how you persist the user
this.props.navigation.navigate(user ? 'App' : 'Auth');
}
Надеюсь это поможет.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.