使用react-navigation时redux状态不发送

Question

我在react-native使用react-navigation和redux。当我使用redux时，状态可以通过redux发送给子节点。但是当我添加react-navigation时它不起作用。
我navigation.js

import {StackNavigator} from 'react-navigation'; 
import Home from './modules/home/views/Home' 
export const StackRouter = StackNavigator({ 
    Main: {screen: Home}, 
    initialRouteName: {screen: Home} 
}); 
const firstAction = StackRouter.router.getActionForPathAndParams('Main'); 
const tempNavState = StackRouter.router.getStateForAction(firstAction); 
const initialNavState = StackRouter.router.getStateForAction(
    firstAction, 
    tempNavState 
); 
//navigationreducer 
export const stackReducer = (state=initialNavState,action) => { 
    debugger 
    const newState = StackRouter.router.getStateForAction(action, state); 
    return newState || state; 
}; 

我store.js

import React, {Component} from 'react'; 
import { connect, Provider } from 'react-redux'; 
import {createStore, combineReducers, bindActionCreators, applyMiddleware } from 'redux'; 
import {addNavigationHelpers} from 'react-navigation' 
import thunk from 'redux-thunk' 
import PropTypes from 'prop-types' 

import {StackRouter, stackReducer} from './router' 
import home from './modules/home'; 



//routerConmponent 
class RouterAppWithState extends Component { 
    constructor(props){ 
     super(props) 
    } 
    render() { 
     return (
      <StackRouter navigation={addNavigationHelpers({ 
       dispatch: this.props.dispatch, 
       state: this.props.router, 
      })} /> 
     ); 
    } 
} 


//all reducer 
const reducer = combineReducers({ 
    home: home.reducer, 
    router: stackReducer, 

}); 

const mapActionToProps = (dispatch) => { 
    return { 
     home_actions: bindActionCreators(home.actions, dispatch) 
    } 
}; 

const mapStateToProps = (state) => { 
    debugger; 
    return state 
}; 



//connect redux and navigation 
const StoreApp = connect(mapStateToProps, mapActionToProps)(RouterAppWithState); 

const store = applyMiddleware(thunk)(createStore)(reducer); 

export default class RootApp extends Component{ 
    render() { 
     return(
      <Provider store={store}> 
       <StoreApp /> 
      </Provider> 
     ) 
    } 

} 

我home.js，只需要导入动作和减速，而出口模块

import actions from './store/actions'; 
import reducer from './store/reducer' 

export default { 
    actions, 
    reducer 
} 

我减速

export default(state=states, action) => { 
    let newState = {...state}; 
    switch (action.type){ 
     case TYPES.ADD_COUNT: newState.count = state.count+1;break; 
     default: break; 
    } 
    return newState 
}; 

个

我的行动

const add_count =() => { 
    console.log('add'); 
    return async (dispatch) => { 
     dispatch({type: TYPES.ADD_COUNT}); 
     await new Promise((resolve) => {setTimeout(() => {resolve()} , 3000)}); 
     dispatch({type: TYPES.ADD_COUNT}); 
    }; 
}; 



export default { 
    add_count 
} 

我看来Home.js

import React, {Component, StyleSheet} from 'react'; 
import {View, Text, Button} from 'react-native'; 

export default class Home extends Component{ 
    constructor(props){ 
     super(props) 
    } 
    // static contextTypes = { 
    //  navigation: React.PropTypes.Object 
    // }; 
    render() { 
     debugger 
     const {add_count} = this.props.home_actions; 
     const {count} = this.props.home; 
     return (
      <View> 
       <Text >{count}</Text> 
       <Button onPress={add_count} title={'add count'}/> 
       {/*<Button onPress={() => {navigation.navigate('live')}} title={'live'}/>*/} 
      </View> 
     ) 
    } 
} 

在Home.js功能呈现，this.props是

{ 
navigation: Object, 
screenProps: undefined 
} 

还没有国终极版。但没有反应过来，导航，this.props是

{ 
home: Object, 
home_actions: Object 
} 

感谢

Answer 1

的原因是因为现在的StackRouter是控制你的Home页面的渲染。路由器只传递一个名为navigation的道具以及从screenProps传递的任何东西。

有，你也可以达到类似的行为，两种方法前：

1）在RouterAppWithState的渲染功能，传承this.props到screenProps这样

<StackRouter navigation={addNavigationHelpers({ 
      dispatch: this.props.dispatch, 
      state: this.props.router, 
     })} 
    screenProps={this.props} 
/> 

2）（推荐）另一种方法是直接在您的主页上使用connect将您的Home组件连接到商店并访问home商店的特定部分。即connect(mapStateToProps)(Home)