React Native Navigation：子屏获取导航状态与路由名及崩溃问题

一、正确获取当前路由名称（无需Redux存储） #

直接利用React Navigation原生API即可获取路由信息，无需额外存入Redux，避免状态同步引发的崩溃：

1. 在DrawerStack全局配置中获取当前路由 #

如果需要在DrawerNavigator的头部或全局配置里做判断，可通过navigation.getState()获取活跃路由：

const DrawerStack = createDrawerNavigator();

function MyDrawer() {
  return (
    <DrawerStack.Navigator
      screenOptions={({ navigation }) => ({
        headerRight: () => {
          const navState = navigation.getState();
          const currentRouteName = navState.routes[navState.index].name;
          return currentRouteName === 'Cart' ? <CartBadge /> : <HomeIcon />;
        },
      })}
    >
      <DrawerStack.Screen name="Home" component={HomeScreen} />
      <DrawerStack.Screen name="Cart" component={CartScreen} />
    </DrawerStack.Navigator>
  );
}

2. 在屏幕组件内判断跳转来源 #

针对你“返回首页时判断购物车状态”的需求，可在HomeScreen中用useFocusEffect结合路由历史判断：

import { useFocusEffect } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { Alert } from 'react-native';

function HomeScreen() {
  const { cartItems } = useSelector(state => state.cart);
  const dispatch = useDispatch();
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      // 获取导航栈历史，判断是否从购物车页面跳转而来
      const routes = navigation.getState().routes;
      const previousRoute = routes[routes.length - 2];

      if (previousRoute?.name === 'Cart' && cartItems.length > 0) {
        Alert.alert(
          '购物车未清空',
          '您的购物车还有商品，是否清空后继续？',
          [
            { text: '取消', style: 'cancel' },
            { 
              text: '确定清空', 
              onPress: () => {
                dispatch(clearCart());
                // 这里可加入Amplitude事件追踪
              } 
            }
          ]
        );
      }
    }, [cartItems, dispatch, navigation])
  );

  return <View>{/* 页面内容 */}</View>;
}

二、修复Redux存储路由名导致的崩溃 #

如果必须将路由名存入Redux，需避免循环更新和错误的触发时机：

1. 在NavigationContainer的onStateChange中更新路由状态，不要在组件内频繁dispatch：

import { NavigationContainer } from '@react-navigation/native';
import { useDispatch } from 'react-redux';

function App() {
  const dispatch = useDispatch();

  return (
    <NavigationContainer
      onStateChange={(state) => {
        const currentRouteName = state.routes[state.index].name;
        // 仅当路由实际变化时才触发更新，避免重复dispatch
        dispatch(setCurrentRoute(currentRouteName));
      }}
    >
      <MyDrawer />
    </NavigationContainer>
  );
}

2. 优化Reducer逻辑，防止无限循环：

const initialState = { currentRoute: '' };

function appReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_CURRENT_ROUTE':
      // 只有当新路由名与现有值不同时才更新状态
      if (state.currentRoute !== action.payload) {
        return { ...state, currentRoute: action.payload };
      }
      return state;
    default:
      return state;
  }
}

三、修复Amplitude追踪事件崩溃 #

崩溃多因初始化不完整、调用时机错误或参数非法导致，按以下方式修复：

1. 提前完成Amplitude初始化，在App入口处执行：

// App.js 最顶部
import Amplitude from 'amplitude-react-native';

Amplitude.initialize('YOUR_AMPLITUDE_API_KEY');

2. 安全触发事件追踪，确保在路由状态稳定后调用：

// 在NavigationContainer的onStateChange中统一追踪
<NavigationContainer
  onStateChange={(state) => {
    const currentRouteName = state.routes[state.index].name;
    // 先校验Amplitude是否已初始化
    if (Amplitude.isInitialized()) {
      Amplitude.logEvent(`Screen_Viewed: ${currentRouteName}`);
    }
  }}
>
  <MyDrawer />
</NavigationContainer>

3. 校验事件参数，避免传递undefined或非法数据：

// 错误示例：可能传递undefined
Amplitude.logEvent('Cart_Cleared', { itemCount: undefined });

// 正确示例：先校验参数
const itemCount = cartItems.length;
Amplitude.logEvent('Cart_Cleared', { itemCount });

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