我在react-native中使用react-navigation和redux。当我刚刚使用redux时,状态可以通过redux发送给child。但是当我添加反应导航时它不起作用。
我的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
}
没有在redux中声明。但没有反应导航,this.props就是
{
home: Object,
home_actions: Object
}
感谢
答案 0 :(得分:4)
原因是因为现在class dataObj():
data = '0123456789'
def __init__(self, data):
pass
正在控制您的StackRouter
页面的呈现。路由器只传递一个名为Home
的道具以及从navigation
传递下来的任何内容。
有两种方法可以实现与以前类似的行为:
1)在screenProps
的渲染功能中,将RouterAppWithState
传递给this.props
,如下所示
screenProps
2)(推荐)另一种方法是直接在主页上使用<StackRouter navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.router,
})}
screenProps={this.props}
/>
将connect
组件连接到商店并访问Home
商店的特定部分。即home