React Native中使用Redux连接多组件异常：两页面内容同屏显示

看起来你混淆了Redux状态共享和页面路由管理的逻辑，导致两个页面组件同时显示在同一个屏幕上。咱们一步步拆解问题，然后给出修复方案：

核心问题：路由未正确配置 #

你当前的AllComp组件直接把Page1和Page2放在同一个<View>里渲染，这就相当于把两个页面的内容硬塞到同一个屏幕上，完全没用到react-native-router-flux的路由跳转能力。路由库的作用就是让同一时间只显示一个页面，通过跳转切换不同页面。

修复步骤 #

1. 重新配置路由栈（入口文件） #

首先你需要在应用的根组件里定义路由结构，用react-native-router-flux的Router、Stack和Scene组件来管理页面。假设你的入口文件是App.js，修改如下：

import React from 'react';
import { Router, Stack, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
// 导入你的Redux store（确保你已经正确创建了store）
import store from './path/to/your/redux/store';
import Page1 from './components/View';
import Page2 from './components/Page2';

export default function App() {
  return (
    {/* 用Provider把整个路由包裹，让所有页面都能访问Redux store */}
    <Provider store={store}>
      <Router>
        <Stack key="root" initial="page1">
          {/* 定义每个页面的Scene，initial标记默认显示的页面 */}
          <Scene key="page1" component={Page1} title="Page 1" />
          <Scene key="page2" component={Page2} title="Page 2" />
          {/* 这里可以添加page3的Scene配置 */}
        </Stack>
      </Router>
    </Provider>
  );
}

2. 让每个页面组件直接连接Redux #

你之前通过父组件传递counter和actions的方式也能工作，但更规范的做法是让每个页面自己通过connect连接Redux，这样无论跳转到哪个页面，都能直接获取状态和触发action。

修改View.js（即Page1）：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// 导入你的action创建函数
import * as actionCreators from '../actions';

const Page1 = ({ counter, incrementCounter }) => (
  <View>
    <Text>Hello from page 1</Text>
    <Button title='Go to page 2' onPress={() => Actions.page2()} />
    <Button title='Go to page 3' onPress={() => Actions.page3()} />
    <Button title='INCREMENT' onPress={() => incrementCounter()} />
    <Text>{counter}</Text>
  </View>
);

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  counter: state.counter
});

// 映射action到组件props
const mapDispatchToProps = (dispatch) => bindActionCreators(actionCreators, dispatch);

// 连接Redux store
export default connect(mapStateToProps, mapDispatchToProps)(Page1);

修改Page2.js：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../actions';

const Page2 = ({ counter, incrementCounter }) => (
  <View>
    <Text>Hello from page2</Text>
    <Button title='Go to Page 1' onPress={() => Actions.page1()} />
    <Button title='Go to Page 3' onPress={() => Actions.page3()} />
    <Button title='Increment' onPress={() => incrementCounter()} />
    <Text>{counter}</Text>
  </View>
);

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

const mapDispatchToProps = (dispatch) => bindActionCreators(actionCreators, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Page2);

3. 移除多余的AllComp组件 #

现在你不需要之前的AllComp组件了，因为路由会负责渲染当前激活的页面，每个页面自己连接Redux，状态会自动在所有页面同步。

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

• 路由栈确保同一时间只有一个页面被渲染，点击按钮调用Actions.pageX()会切换到对应的页面。
• 每个页面通过connect连接Redux，所以无论在哪个页面点击Increment按钮，counter状态都会在Redux store中更新，所有页面都会同步显示最新的数值。

最后别忘了确认你的Redux store配置是正确的（比如reducer正确处理incrementCounter action），这是状态同步的基础。

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