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

Question

我正在使用react-navigation和redux in react-native。当我刚刚使用redux时，状态可以通过redux发送给child。但是当我添加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.is，只需导入动作和减速器，然后导出模块

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
}

还没有在redux中说明。但没有反应导航，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)