Question

我正在使用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存储并显示this.props.count值

PS ：这只是我的问题的演示，实际代码类似于此演示

Answer 1

我最终通过将react-redux降级到5.1.1来解决我的问题，问题是在react-redux 7.0.2中connect()方法返回对象，但是在react-navigation 2.18.2中它假定是函数I猜想，因此存在类型不匹配的情况，因此我必须将react-redux降级到5.1.1，这是我先前在其他项目中使用的，其中connect()方法返回了react-navigation预期的功能。

PS：我有点奇怪，我使用上述问题的环境设置配置了一个新项目，并且可以运行，但不适用于现有项目。

Answer 2

通过包装要在导航器中使用的已连接组件，我将其与Redux 7和React Navigation 3配合使用：

import Component1 from "./Component1.js";
import Component2 from "./Component1.js";
import Component3 from "./Component1.js";
import Component4 from "./Component1.js";

const Component1Shell = () => {
  return <Component1 />;
};

const Component2Shell = () => {
  return <Component2 />;
};

const Component3Shell = () => {
  return <Component3/>;
};

const Component4Shell = () => {
  return <Component4/>;
};

const AppNavigator = createStackNavigator({
  Page1: { screen: Component1Shell },
  Page2: { screen: Component2Shell },
  Page3: { screen: Component3Shell },
  Page4: { screen: Component4Shell }
});

Answer 3

对于仍在挣扎的人们：

const AppNavigator = createStackNavigator(
  {
     RouteNameOne: {
      screen:() => <Screen1/>
    },
    RouteNameTwo: {
      screen:() => <Screen2/>
    },
  },
  {
  initialRouteName: 'RouteNameOne',
  }
);

尝试将屏幕组件添加到这样的路由，可能会起作用。

Answer 4

使用 mapStateToProps 是这里的解决方案，您可以使用

const mapStateToProps = state => {
     return {
        count: state.count
     }
}

export default connect(mapStateToProps,mapDispatchToProps)(Test);

我认为这可以工作

Answer 5

您必须在组件中使用 mapStateToProps函数 像这样

function mapStateToProps(state) {
    return {
        state
    }
}

function mapDispatchToProps() {
... your code to dispatch actions...
}

export default connect(mapStateToProps, mapDispatchToProps)(yourComponentName)

在react-navigation中使用react-redux connect方法显示错误“路由'x'的组件必须是React组件

5 个答案: