我正在使用 react-redux 将 redux 连接到我的 react-native 项目,但是当我使用 export default connect(state => ({ count: state.count }))(Test)
方法并导入以响应导航作为 creactStackNavigator({test:Test})
它显示
The component for route 'test' must be a React component
import MyScreen from './MyScreen';
...
test: MyScreen,
}
但是当我删除 connect()
方法时它工作得很好
环境:
"react":16.8.4
"react-native":0.59.4
"react-redux": "7.0.2",
"redux": "4.0.1",
"react-navigation": "2.18.2",
Test.js
import React, { Component } from 'react';
import { Text, View,Button} from 'react-native';
import {connect} from 'react-redux';
class Test extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>count:{this.props.count}</Text>
<Button title="Increment" onPress={() => this.props.incrementCounter()}></Button>
<Button title="Decrement" onPress={() => this.props.decrementCounter()}></Button>
</View>
)
}
}
const mapDispatchToProps = dispatch =>({
incrementCounter: _ => dispatch({type:"INCREMENT_COUNTER"}),
incrementCounter: _ => dispatch({type:"DECREMENT_COUNTER"}),
})
export default connect(state => ({ count: state.count }),mapDispatchToProps )(Test)
reducers.js
const INITIAL_STATE = {
count: 1
}
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'COUNTER_INCREMENT': {
return (Object.assign({}, { ...state, count: state.count + 1}))
}
case 'COUNTER_DECREMENT': {
return Object.assign({},{ ...state, count: state.count - 1 });
}
default: {
return state;
}
}
}
App.js
import React, { Component } from 'react';
import { Platform, } from 'react-native';
import { Provider } from 'react-redux';
import { createStackNavigator} from 'react-navigation';
import Test from './src/screens/test';
import Screen2 from './src/screens/screen2';
import { createStore } from 'redux';
import reducers from './reducers';
const store = createStore(reducers);
const AppNavigator = createStackNavigator({
test: Test,
screen2: Screen2
}, {
headerMode: "none"
});
export default class App extends Component {
render() {
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
}
}
预期行为:
它应该连接到 redux store 并显示 this.props.count
值
附言 : 这只是我的问题的演示,实际代码与此演示类似
最佳答案
我终于通过将 react-redux 降级到 5.1.1 解决了我的问题,问题是在 react-redux 7.0.2 中 connect()
方法返回对象,但在 react-navigation 中2.18.2
我猜它假设是函数,所以存在类型不匹配,因此我必须将 react-redux 降级到 5.1.1,我之前在 connect()< 的不同项目中使用过
方法返回函数如 react-navigation 所期望的那样。
PS:有点奇怪,我用上述问题的环境设置配置了一个新项目并且它有效,但不适用于现有项目。
关于react-native - 在 react-navigation 中使用 react-redux connect 方法显示错误 "The component for route ' x' must be a React component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55792970/