在ReactNavigation的简单应用中,只需要定义导航结构与页面对应关系,在各自页面处理导航相关的信息显示与传达数据。如果将Redux与ReactNavigation相结合,我们可以自定义导航事件与导航状态。
ReactNavigator与Redux集成的主要步骤:
实例:包含主页面(MainScreen)与登录页面(LoginScreen),如果登录成功,则主页页面显示登录信息,如果没有登录,显示登录按钮。
1.在Redux的state中定义导航结构,并将其传入navigation的state。
a.state数据结构定义:包含导航信息(state.nav)和是否登录成功(state.isLogin)。
const AppReducer = combineReducers({
nav,
isLogin,
});
b.定义页面导航结构
export const AppNavigator = StackNavigator({
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
});
c.自定义导航规则
如果需要改变规则则可自定义导航页面,如:Logout
case 'Logout':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Login' }),
state
);
d.页面导航
2.将自定义的导航结构传入navigation的prop。包括:state, dispatch,addListener。
navigation=)}
const mapStateToProps = state => ({
nav: state.nav,
});
connect(mapStateToProps)(AppWithNavigationState);
领取专属 10元无门槛券
私享最新 技术干货