React Native中Stack Navigator重复推送多屏问题求助

看起来你碰到了React Navigation栈导航里的重复页面推送问题，我之前也处理过类似的情况，结合你的场景和代码，给你几个排查和解决的方向：

问题复盘 #

你当前的异常流程：

1. A → B，按Android返回键回到A
2. 再次A → B → C时，Navigator重复推送多个C页面

你的栈导航配置（v1.x版本的StackNavigator）：

const StackScreense = StackNavigator({
  A: { screen: A},
  B: { screen: B},
  C: { screen: C},
}, {
  initialRouteName: 'A',
  navigationOptions:{ header: null},
  initialRouteParams: { status: ' ' }
});

可能的原因及解决方案 #

1. 导航事件绑定不当，导致多次触发 #

如果在页面B中，你直接把this.props.navigation.navigate作为点击回调，或者没有正确绑定this，可能会导致每次进入B页面时都重复注册事件，最终触发多次导航。

修复方式：

• 优先使用箭头函数包裹导航逻辑，确保每次点击只触发一次：

  // 推荐写法：箭头函数包裹导航调用
  <TouchableOpacity onPress={() => this.props.navigation.navigate('C')}>
    <Text>跳转到C页面</Text>
  </TouchableOpacity>
  

• 如果需要提取成单独方法，一定要在构造函数里绑定this：

  constructor(props) {
    super(props);
    // 绑定this，避免每次渲染创建新的函数实例
    this.navigateToC = this.navigateToC.bind(this);
  }
  
  navigateToC() {
    this.props.navigation.navigate('C');
  }
  
  // 使用绑定后的方法
  <TouchableOpacity onPress={this.navigateToC}>
    <Text>跳转到C页面</Text>
  </TouchableOpacity>
  

2. Android返回键监听未正确移除 #

这是最常见的原因！如果在页面B中自定义了Android返回键的处理（用BackHandler），但没有在组件卸载时移除监听，那么从B返回A后，监听仍然存在；再次进入B时，会添加新的监听，最终导致多个监听触发，进而重复推送页面。

修复方式：

• 在组件生命周期中正确添加和移除监听：

  import { BackHandler } from 'react-native';
  
  componentDidMount() {
    // 保存监听实例，方便后续移除
    this.backListener = BackHandler.addEventListener(
      'hardwareBackPress',
      this.handleBackPress
    );
  }
  
  componentWillUnmount() {
    // 必须移除监听，防止内存泄漏和重复触发
    this.backListener.remove();
  }
  
  handleBackPress = () => {
    this.props.navigation.goBack();
    return true; // 阻止系统默认的返回行为
  }
  

3. 旧版本React Navigation的栈管理bug #

你使用的是StackNavigator，这是React Navigation v1.x的API，这个版本确实存在一些栈管理的bug，尤其是在处理返回键和重复导航时。

修复方式：

• 升级到最新稳定版的React Navigation（推荐v6.x），新版本的栈导航逻辑更健壮，API也更清晰。升级后的配置示例：

  // React Navigation v6.x 配置
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
  const Stack = createNativeStackNavigator();
  
  function AppNavigator() {
    return (
      <NavigationContainer>
        <Stack.Navigator 
          initialRouteName="A"
          screenOptions={{ headerShown: false }} // 对应原来的header: null
        >
          <Stack.Screen name="A" component={A} />
          <Stack.Screen name="B" component={B} />
          <Stack.Screen name="C" component={C} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

4. 导航逻辑被重复执行 #

检查页面B中触发跳转到C的代码，是否在生命周期方法（比如componentDidMount）中错误调用了导航，或者状态变化导致重复执行导航逻辑。

修复方式：

• 确保导航到C的逻辑只在用户交互时触发（比如按钮点击），不要在生命周期里自动调用。
• 如果是状态驱动的导航，添加条件判断防止重复跳转：

  // 类组件示例
  componentDidUpdate(prevProps, prevState) {
    // 只有当状态变化且还没跳转过时，才执行导航
    if (this.state.shouldGoToC && !this.state.hasNavigated) {
      this.props.navigation.navigate('C');
      this.setState({ hasNavigated: true });
    }
  }
  

排查顺序建议 #

1. 先检查返回键监听是否正确移除，这是最容易踩坑的点；
2. 然后检查导航事件的绑定方式，避免重复注册；
3. 如果以上都没问题，考虑升级React Navigation版本，旧版本的bug确实不少。

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