React:react-navigation / react-navigation-redux-helpers-'不变违规:元素类型在ExpoRootComponent处无效...

时间:2019-01-13 18:39:33

标签: reactjs react-native redux react-redux react-navigation

我正在尝试在react本机应用程序中实现redux和导航,因此我试图遵循react-native-redux-helpers(here)的说明。

我似乎已经能够到达Root类实例化而没有任何问题,但是在组件尝试加载时收到错误消息:

Error at ExpoRootComponent (Seemingly at Root class instantiation)

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import rootReducer from './src/reducers/index';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { reduxifyNavigator, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';

import LoginScreen from './src/screens/LoginScreen';
import NotesScreen from './src/screens/NotesScreen';

const AppNavigator = createStackNavigator({
  Login: {
        screen: LoginScreen
  },
  Notes: {
        screen: NotesScreen
  }
})

const navReducer = createNavigationReducer(AppNavigator);

const appReducer = combineReducers({
  rootReducer,
  navReducer
})

const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);

const App = reduxifyNavigator(AppNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav
})

const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(appReducer, applyMiddleware(middleware));

class Root extends React.Component {
  render() {
        return (
              <Provider store={store}>
                    <AppWithNavigationState />
              </Provider>
        )
  }
}

1 个答案:

答案 0 :(得分:1)

您需要像这样导出您的课程;

export default class Root extends React.Component {
  render() {
    return (
          <Provider store={store}>
                <AppWithNavigationState />
          </Provider>
    );
  }
} 

编辑:另外,您还需要更改组合式减速器;

const appReducer = combineReducers({
  rootReducer,
  nav: navReducer
})

因此,您可以在mapStateToProps中使用state:state.nav