【发布时间】:2018-08-30 13:17:59
【问题描述】:
我有两个导航器,一个是stackNavigator,另一个是drawerNavigator。
我想要做的是调度一个动作并且登录成功并将用户重定向到抽屉导航器。我使用了反应导航。
我所做的是在 saga 中发送动作登录成功。
使用NavigationActions.navigate({ routeName: 'drawerStack' }) 调度操作。
该操作成功调度,但它没有导航到drawerNavigator,如下图所示。我做错了什么?
saga.js
function* watchLoginRequest() {
while (true) {
const { state } = yield take(LOGIN_REQUEST);
try {
const payload = {
state
};
const response = yield call(loginCall, payload);
yield put(loginSuccess(response));
yield setUser(response.user);
yield put(NavigationActions.navigate({ routeName: 'drawerStack' }));
} catch (err) {
yield put(loginFailure(err.status));
}
}
}
drawerNavigation.js
// drawer stack
const DrawerStack = DrawerNavigator({
testComponent: { screen: TestComponent },
});
const DrawerNav = StackNavigator({
drawerStack: { screen: DrawerStack }
}, {
headerMode: 'float',
navigationOptions: ({ navigation }) => ({
headerStyle: { backgroundColor: 'green' },
title: 'Logged In to your app!',
headerLeft: <Text onPress={() => navigation.navigate('DrawerOpen')}>Menu</Text>
})
});
export default DrawerNav;
loginNavigation.js
// login stack
const LoginStack = StackNavigator({
startScreen: { screen: StartScreen },
loginScreen: { screen: LoginScreen },
personalInformation: { screen: PersonalInformation },
vehicleInformation: { screen: VehicleInformation },
availability: { screen: Availability },
selectRegisteration: { screen: SelectRegisteration },
serviceAddress: { screen: ServiceAddress },
}, {
headerMode: 'none',
transitionConfig: TransitionConfiguration
});
export default LoginStack;
ReduxNavigation.js
class ReduxNavigation extends React.Component {
constructor(props) {
super(props);
const { dispatch, nav } = props;
const navigation = ReactNavigation.addNavigationHelpers({
dispatch,
state: nav
});
this.state = {
loggedInStatus: false,
checkedSignIn: false
};
}
componentWillMount() {
isSignedIn()
.then(res => {
if (res !== null) {
this.setState({
loggedInStatus: true,
checkedSignIn: true
});
} else {
console.log(res);
}
})
.catch(err => console.log(err));
}
render() {
return <LoginNavigation navigation={this.navigation} />;
}
}
const mapStateToProps = state => ({ nav: state.nav });
export default connect(mapStateToProps)(ReduxNavigation);
【问题讨论】:
-
您期待什么?导航到
TestComponent或显示抽屉?显示你想要的抽屉.navigate('DrawerOpen') -
实际上我正在尝试导航到 TestComponent。
-
如果我 .navigate('DrawerOpen') 也不会打开抽屉
-
您将抽屉导航器添加到导航堆栈的哪个位置?您要么没有提供所有代码,要么没有正确设置导航堆栈。
DrawerNavigator如果您希望能够导航到它的任何路径,则需要将其添加到堆栈中 -
就个人而言,我发现导航有点混乱。我建议从没有
redux的基本设置开始并了解这一点。然后你可以添加redux。 AFAIK,您无法即时修改导航堆栈,这听起来像是您可能正在尝试做的事情。见github.com/react-navigation/react-navigation/issues/71
标签: reactjs react-native react-redux react-navigation redux-saga