tags: React-Native

整合实例，其实这完全是Redux的使用，文档里的例子没有写全所以不太好看,github的例子,代码就比较全了.

对Redux的概念理解了这个看起来就简单一点.如果对于Redux的概念不理解,可以看我的几篇翻译文章和前面写的Redux的理解文章.
简书没有目录导航,不是太好看.可以看看我的博客，里面有目录结构.
我理解其中的流程就是,

1. React组件接受props，获取state和dispatch.
2. 组件dispatch action改变navigation的state.
   3.根据state的相应变化加载对应的screen.

/*** @flow*/import React from 'react';
import {AppRegistry,AsyncStorage,Button,StyleSheet,Text,View,
} from 'react-native';
import {NavigationActions,addNavigationHelpers,StackNavigator,
} from 'react-navigation';
import {Provider,connect,//redux,connect函数,负责向展示组件注入state和dispatch
} from 'react-redux';
import {createStore,combineReducers,
} from 'redux';
import {persistStore,autoRehydrate,
} from 'redux-persist';//redux state持久化的中间件const ProfileScreen = ({ navigation }) => (//这个组件没有dispatch<View style={styles.container}><Text style={styles.welcome}>Profile Screen</Text></View>
);
ProfileScreen.navigationOptions = {//配置navigationOptions对象title: 'Profile',
};const LoginScreen = ({ navigation }) => (<View style={styles.container}><Text style={styles.welcome}>Screen A</Text><Text style={styles.instructions}>This is great</Text><ButtononPress={() => navigation.dispatch({ type: 'Login' })}title="Log in"/></View>
);
LoginScreen.navigationOptions = {title: 'Log In',
};//connect 注入state和dispatch
//connect注入的组件是动态加载的
const LoginStatusMessage = connect(state => ({isLoggedIn: state.auth.isLoggedIn,
}))(({ isLoggedIn, dispatch }) => {//注入组件的动态加载部分if (!isLoggedIn) {return <Text>Please log in</Text>;}return (<View><Text style={styles.welcome}>{'You are "logged in" right now'}</Text><ButtononPress={() => dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}title="Profile"/></View>);
});const AuthButton = connect(state => ({isLoggedIn: state.auth.isLoggedIn,
}), dispatch => ({logout: () => dispatch({ type: 'Logout' }),login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
}))(({ logout, login, isLoggedIn }) => (<Buttontitle={isLoggedIn ? 'Log Out' : 'Log In'}onPress={isLoggedIn ? logout : login}/>
));const MainScreen = () => (<View style={styles.container}><LoginStatusMessage /><AuthButton /></View>
);
MainScreen.navigationOptions = {title: 'Home Screen',
};const AppNavigator = StackNavigator({Login: { screen: LoginScreen },Main: { screen: MainScreen },Profile: { screen: ProfileScreen },
});const AppWithNavigationState = connect(state => ({nav: state.nav,
}))(({ dispatch, nav }) => (<AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
));const initialNavState = {index: 1,routes: [{ key: 'InitA', routeName: 'Main' },{ key: 'InitB', routeName: 'Login' },],
};const initialAuthState = { isLoggedIn: false };const AppReducer = combineReducers({//路由状态的改变实际逻辑nav: (state = initialNavState, action) => {if (action.type === 'Login') {return AppNavigator.router.getStateForAction(NavigationActions.back(), state);}if (action.type === 'Logout') {return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);}return AppNavigator.router.getStateForAction(action, state);},auth: (state = initialAuthState, action) => {if (action.type === 'Login') {return { ...state, isLoggedIn: true };}if (action.type === 'Logout') {return { ...state, isLoggedIn: false };}return state;},
});class ReduxExampleApp extends React.Component {
//创建storestore = createStore(AppReducer, undefined, autoRehydrate());componentDidMount() {//持久化恢复储存的statepersistStore(this.store, { storage: AsyncStorage });}render() {return (<Provider store={this.store}><AppWithNavigationState /></Provider>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);