react-native - 如何将 Redux 与 createSwitchNavigator 一起使用?
问题描述
我正在尝试将 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>
);
}
}
我尝试按照以下链接的说明进行操作,但仍然遇到相同的错误。
谁能告诉我我的代码有什么问题?
解决方案
经过太多尝试,我发现,开关导航器不需要连接到商店,所以下面的步骤是不正确的。
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>
);
}
}
推荐阅读
- android - Android 谷歌地图上丢失的瓷砖
- algorithm - 如何将内容动态定位到用户?
- python - 将字符串中的时间段转换为等效的数字天数
- python - conda 升级 python 版本并删除旧版本
- java - 查找以某个单词开头和结尾的子字符串
- protocols - 为什么数据不能写在 ASB 的基地址 +1 上
- node.js - 当在黄瓜步骤 def 中递归调用 promise 函数时,promise 返回 timdeout 5000ms
- python - 使用 Matplotlib 在 python 中设置 y 轴的顺序
- java - 让 Quarkus 健康检查在应用程序以外的另一个端口上运行
- javascript - 将箭头函数和 event.target 与事件处理程序一起使用来获取范围而不是普通函数和 this 关键字?