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

Question

我在 react-native 中使用 react-navigation 和 redux。当我刚刚使用 redux 时，状态可以通过 redux 发送给孩子。但是当我添加反应导航时它不起作用。
我的导航.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;
};

我的商店.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，只需要导入actions和reducers，然后导出模块

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)