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

Question

我在react-native中使用react-navigation和redux。当我刚刚使用redux时，状态可以通过redux发送给child。但当我添加 react 导航时它不起作用。
我的导航.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，只需导入actions和reducers，然后导出模块

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

export default {
    actions,
    reducer
} 

我的 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
}

我的 View 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函数render中，this.props是

{
navigation: Object,
screenProps: undefined
}

在 redux 中没有状态。但如果没有反应导航， this.props 就是

{
home: Object,
home_actions: Object
}

谢谢

Answer 1

原因是因为现在 StackRouter 正在控制 Home 页面的呈现。路由器仅传递名为 navigation 的 prop 以及您从 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)