带有 redux 的 Stacknavigator 在 redux 中没有导航道具

Question

我想在我的应用程序中使用 react-navigation 和 redux，但我不想在 redux 状态下保存导航属性。相反，我只想像以前一样导航，但也有 redux 状态，我看到了我在 App.js:

中实现的以下方法

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => dispatch;

// need this Higher Order Component so you can pass properties through the root stack
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(RootStack);

export default class App extends Component {
  render() {
    return (
        <Provider store={Store}>
          <AppContainer />
        </Provider>
    );
  }
}

但是当我尝试使用这种方法时，我得到了

"you must pass a component to the function returned by connect. instead received"

错误。

这是我的 StackNavigator：

import { createStackNavigator } from 'react-navigation'
import {HomeScreen} from '../screens/HomeScreen'
import {CardScreen} from '../screens/CardScreen'


const RootStack = createStackNavigator(
    {
        Home: HomeScreen,
        Card: CardScreen,
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            header: null, 
        },
    }
);

export default RootStack

Answer 1

RootStack 不是反应组件。你需要做这样的事情，我建议移动到一个单独的文件：

class AppContainer extends React.Component {
  render(){
    return <RootStack />
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer)

现在您可以导入 AppContainer 并将其传递给您的 App 组件

带有 redux 的 Stacknavigator 在 redux 中没有导航道具

Stacknavigator with redux without navigation prop in redux

react-native

redux

react-redux

react-navigation

stack-navigator