React Native Navigation V2与Redux集成问题：V1传Store方式失效

React Native Navigation V2 移除了 V1 里 registerComponent 方法的 store 和 Provider 参数，所以我们得调整集成思路——核心是在应用根层通过 Provider 注入 store，再用 Redux 的 connect 高阶组件把屏幕组件和 store 关联起来。下面是具体的实现步骤：

1. 修改根组件（index.js） #

首先要确保整个应用被 Redux 的 Provider 包裹，这样所有导航屏幕都能通过 React 上下文访问到 store。调整你的 index.js 代码如下：

import React from 'react';
import { Provider } from 'react-redux';
import { Navigation } from 'react-native-navigation';
import configureNavigation from './routers/app_navigation';
import createStore from './reducers';
import RouterConstants from './routers/router_constants';

// 创建 Redux store
const store = createStore();

// 先注册所有导航屏幕
configureNavigation();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.startApp();
  }

  startApp() {
    // 设置导航根结构（可根据你的路由需求调整）
    Navigation.setRoot({
      root: {
        stack: {
          children: [
            {
              component: {
                name: RouterConstants.SplashScreen
              }
            }
          ]
        }
      }
    });
  }

  render() {
    // 由于导航由 Native 层负责渲染，这里返回 null 即可
    return null;
  }
}

// 用 Provider 包裹根组件，注入全局 store
export default () => (
  <Provider store={store}>
    <App />
  </Provider>
);

2. 调整导航注册文件（app_navigation.js） #

V2 的 registerComponent 不再接收 store 和 Provider 参数，直接注册你的屏幕组件就行：

import { Navigation } from 'react-native-navigation';
import SplashScreen from '../screens/SplashScreen';
// 导入其他需要注册的屏幕组件
// import HomeScreen from '../screens/HomeScreen';
import RouterConstants from './router_constants';

export default function configureNavigation() {
  // 注册启动页
  Navigation.registerComponent(RouterConstants.SplashScreen, () => SplashScreen);
  
  // 注册其他屏幕（示例）
  // Navigation.registerComponent(RouterConstants.HomeScreen, () => HomeScreen);
}

3. 连接屏幕组件与 Redux #

每个需要访问 store 的屏幕组件，都要用 connect 高阶组件和 store 关联。以 SplashScreen.js 为例：

import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
// 导入你的 action creators（如果需要触发状态变更）
// import { fetchUserData } from '../actions/userActions';

class SplashScreen extends React.Component {
  componentDidMount() {
    // 示例：访问 store 中的状态
    console.log('当前全局状态:', this.props.userInfo);
    
    // 示例：触发 action
    // this.props.fetchUserData();
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>启动页</Text>
      </View>
    );
  }
}

// 映射 store 状态到组件 props
const mapStateToProps = (state) => {
  return {
    userInfo: state.userReducer.userInfo // 根据你的 reducer 结构调整
  };
};

// 映射 action creators 到组件 props
const mapDispatchToProps = (dispatch) => {
  return {
    // fetchUserData: () => dispatch(fetchUserData())
  };
};

// 用 connect 包裹组件，完成与 Redux 的关联
export default connect(mapStateToProps, mapDispatchToProps)(SplashScreen);

关键注意点 #

• 不要重复包裹 Provider：只需要在应用根层用 Provider 包裹一次，所有子组件（包括导航屏幕）都能通过上下文访问 store。
• connect 是必要环节：只有通过 connect 包裹的组件，才能直接获取 store 的状态和 dispatch 方法；未连接的组件无法直接访问 store。
• 导航根结构要符合 V2 语法：Navigation.setRoot 的配置要使用 V2 支持的根类型（如 stack、tabs 等），确保路由能正常渲染。

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