如何在React Navigation中访问Redux Store并动态切换底部标签栏

当然可以用connect HOC在函数组件里访问Redux Store！你之前遇到的错误是因为把connect包裹在了createAppContainer外面，导致导航器同时收到了Redux传递的isLogin、dispatch props和React Navigation的导航props，引发了状态归属的冲突。

问题根源 #

createAppContainer返回的是一个依赖导航props的组件，当你用connect包裹它时，会额外注入Redux相关的props，这让React Navigation无法判断导航器是否应该管理自己的状态，因此抛出了那个错误。

修正后的实现步骤 #

核心思路是：先让负责切换导航器的组件通过connect获取Redux状态，再把这个组件用createAppContainer包裹，而不是反过来。

以下是完整的修正代码：

import { connect } from 'react-redux';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

// 1. 定义登录/未登录状态下的底部标签导航器
const LoginTabs = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Browse: { screen: BrowseScreen },
  Search: { screen: SearchScreen },
  Radio: { screen: RadioScreen },
  Library: { screen: LibraryScreen }, // 登录后新增的标签
});

const NotLoginTabs = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Browse: { screen: BrowseScreen },
  Search: { screen: SearchScreen },
  Radio: { screen: RadioScreen },
});

// 2. 定义根据isLogin切换导航器的函数组件
// 注意要把导航相关的props传递给对应的导航器
const TabsSwitcher = ({ isLogin, ...navigationProps }) => {
  return isLogin ? <LoginTabs {...navigationProps} /> : <NotLoginTabs {...navigationProps} />;
};

// 3. 映射Redux状态到组件props
const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
  };
};

// 4. 连接组件与Redux Store
const ConnectedTabsSwitcher = connect(mapStateToProps)(TabsSwitcher);

// 5. 最后用createAppContainer包裹连接后的组件
export default createAppContainer(ConnectedTabsSwitcher);

为什么这样能解决问题？ #

• TabsSwitcher作为中间组件，只负责接收Redux的isLogin状态，并将导航所需的props透传给对应的标签导航器。
• connect只作用于TabsSwitcher，不会干扰底层导航器的props传递，避免了React Navigation的状态冲突问题。
• 当Redux中isLogin状态变化时，TabsSwitcher会自动重新渲染，切换到对应的底部标签导航。

这种方式既保持了组件职责的单一性，也符合React Navigation和Redux的最佳实践，比把所有导航逻辑塞进一个类组件要更清晰易维护。

内容的提问来源于stack exchange，提问作者Oliver D