ReactNavigation＆Redux

在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);