React Native复用屏幕时如何通过react-navigation判断所在父栈？

你当前用props?.navigation.getState()?.routes?.[0]?.name的方式存在几个明显隐患：

• 完全依赖导航栈的内部结构，一旦后续调整导航层级（比如新增根路由、修改嵌套关系），这个路径会直接失效，维护性极差。
• 如果父栈本身嵌套在其他导航栈里，routes[0]拿到的会是最外层根栈的初始路由，而非你需要的父栈名称，逻辑会出错。

下面给你几个更可靠的方案，按推荐优先级排序：

方案1：跳转时传递父栈标识（最推荐） #

在跳转到复用屏幕时，明确传入父栈的标识参数，完全可控：

// 从StackA跳转
navigation.navigate('ReusableScreen', { parentStack: 'StackA' });

// 从StackB跳转
navigation.navigate('ReusableScreen', { parentStack: 'StackB' });

在复用屏幕中直接读取参数并判断：

const { parentStack } = route.params || {};

return parentStack === 'StackA' ? <ComponentA /> : <ComponentB />;

这种方式不依赖任何导航内部结构，可读性强，后续修改导航逻辑也不会影响判断逻辑。

方案2：给复用屏幕设置路由别名 #

如果不想传参数，可以在不同父栈的导航配置里给复用屏幕设置不同的名称：

// StackA的路由配置
<Stack.Screen name="ReusableScreenForA" component={ReusableScreen} />

// StackB的路由配置
<Stack.Screen name="ReusableScreenForB" component={ReusableScreen} />

然后在复用屏幕中通过当前路由名称判断：

const { name: screenAlias } = route;

return screenAlias === 'ReusableScreenForA' ? <ComponentA /> : <ComponentB />;

这个方式也很稳定，不需要额外传参，适合路由配置可以调整的场景。

方案3：通过父导航器获取（不推荐，依赖结构） #

如果一定要从导航器状态获取，可以用navigation.getParent()拿到父导航器实例，再读取它的状态：

const parentNavigator = navigation.getParent();
const parentStackName = parentNavigator?.getState()?.routeName;

但这个方法还是依赖导航层级结构，一旦父导航器的嵌套关系变化，代码就会出问题，只适合导航结构完全固定的场景。

总结：优先用方案1或方案2，比你当前的写法更健壮，能避免后续维护中出现的各种隐性bug。

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