如何将 Redux 与 createSwitchNavigator 一起使用？

Question

我正在尝试将 switch navigator 与 redux 结合使用。以下是我的代码。

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
import LoginScreen from '../screens/LoginScreen';
import EmployeeListScreen from '../screens/EmployeeListScreen';
import DetailsView from '../screens/EmployeeDetailViewScreen';
import EmployeeForm from '../screens/EmployeeForm';
import AuthLoadingScreen from "../screens/AuthLoadingScreen.js";
import {connect  } from "react-redux";
import { AppNavigator } from "../navigations/AppNavigator.js";

const AppStack = createStackNavigator({ 
    List:{screen:EmployeeListScreen},
    Detail:{screen:DetailsView},
    Form:{screen:EmployeeForm}
 });
const AuthStack = createStackNavigator({ Login: LoginScreen });

export const AuthNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppNavigator,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const AuthWithNavigationState = ({ dispatch, nav }) => (
    <AuthNavigator  />
  );

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

  export default connect(mapStateToProps)(AuthWithNavigationState);

我正在导入这个组件是我的 App.js 文件，并按如下方式使用它来连接 redux 存储，但它给我的错误是，React 未定义，错误位于 connect(AuthWithNavigationState)

import React from 'react';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware  } from 'redux';
import thunk from 'redux-thunk';
import AppReducer from './src/reducers/AppReducer';
import AuthWithNavigationState from './src/navigations/AuthNavigator.js';

const store = createStore(AppReducer,applyMiddleware(thunk));

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

我已经尝试按照下面的说明进行操作 link 但我仍然遇到同样的错误。

how can i integrate redux store to react native?

谁能告诉我我的代码有什么问题？

Answer 1

经过多次尝试，我发现，切换导航器不需要连接到商店，所以下面的步骤不正确。

const AuthWithNavigationState = ({ dispatch, nav }) => (
    <AuthNavigator  />
  );

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

  export default connect(mapStateToProps)(AuthWithNavigationState);

我只是导出了 AuthNavigator 并在 App.js 中导入，这对我有用。

import React from 'react';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware  } from 'redux';
import thunk from 'redux-thunk';
import AppReducer from './src/reducers/AppReducer';
import AuthNavigatorfrom './src/navigations/AuthNavigator.js';

const store = createStore(AppReducer,applyMiddleware(thunk));

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

如何将 Redux 与 createSwitchNavigator 一起使用？

how to use Redux with createSwitchNavigator?

navigation

state-management

react-native

redux