react集成redux和Navigation

用到的插件如下：

  "react-redux": "^5.0.6",//redux
  "redux": "^3.7.2",//redux 
  "redux-logger": "^3.0.6",//redux 日志
  "redux-thunk": "^2.2.0",//支持异步请求发送
  "redux-devtools": "^3.4.0"//支持redux开发工具的Chrome插件

1.分别 npm install --save 插件名
2.新建Root文件，引入store文件，通过store，向APP中注入

import {Provider}from 'react-redux';

 
// 引入store文件，下步会创建
import configureStore from './store/ConfigureStore';
const store = configureStore();

import App from './App';
if (!__DEV__) {
    global.console = {
        info: () => {
        },
        log: () => {
        },
        warn: () => {
        },
        error: () => {
        },
    };
}


export default class Root extends Component {
    constructor(props){
        super(props);
        this.state = {
        }
    }
    

    render() {
        return (
            <Provider store={store}>
                <App />
            </Provider>
        );
    }
};

在App.js中引入connect

import {connect} from 'react-redux';

关联Navigation

  export const MyApp = StackNavigator({
  ReactNavigation:{screen:ReactNavigation,navigationOptions:{header:null}},
  Main: {
    screen: MainScreen,
    path:'kingdom/:DeepLinkUser'
  },
  Main1: {
    screen: MainScreen1,
    path:'kingdom/:DeepLinkUser'
  },
  Main2: {
    screen: MainScreen2,
    path:'kingdom/:DeepLinkMain2'
  },
  Main3: {
    screen: MainScreen3,
    path:'kingdom/:DeepLinkMain2'
  },
  profile:{
    screen: ProfileScreen,
  }
},
{
  initialRouteName:'ReactNavigation',
  initialRouteParams :{
    AppName:'KingdomYrt'
  },
  headerMode:'screen',
  transitionConfig: (() => ({
       screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }))
});


 //设置 URL's  Schema,和 Host,这里注意箭头后面不要用“{}” 语法不识别。
const MainApp = () =>  <MyApp   uriPrefix={'kingdomYrt://kingdomYrt/'} onNavigationStateChange={(prevNav, newNav, action) => {
    console.group('Navigation Dispatchssss: ');
    console.log('Action: ', action);
    console.log('New State: ', newNav);
    console.log('Last State: ', prevNav);
    console.groupEnd();
    nav.routes = newNav.routes;
  
  }}/>
const AppWithNavigationState = ({ dispatch, nav }) => (
  <MainApp navigation={addNavigationHelpers({ dispatch, state: nav })}/>
);

const mapStateToProps = state => ({
  nav: state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);

到此为止，基础组件引入已经完成
下一节我们将要讲述如何使用redux。