如何通过Expo Linking访问嵌套的PaymentMethod屏幕及路径配置

调整后的Linking配置 #

根据你的页面层级Home > More（Tab）> MyWallet（Screen）> PaymentMethod（Screen），需要修正Linking的嵌套结构，让PaymentMethod作为MyWallet所属栈的子页面被正确映射：

export const LinkingConfig = {
  prefixes: [Linking.createURL('/')],
  config: {
    screens: {
      Home: {
        path: 'home',
        screens: {
          'PROMOTIONS': {
            path:'Promotions',
            screens: {
              PromotionDetails:':id'
            }
          },
          'MENU': {
            path: 'More', // 对应Tab栏的More标签路径
            screens: {
              // 这里的名称要和Tab导航器中指向WalletStackScreen的screen name一致
              WalletStack: {
                path: 'MyWallet', // 对应栈的初始页面MyWallet的路径
                screens: {
                  PaymentMethod: 'payment-method' // PaymentMethod的路径段，可自定义
                }
              }
            }
          },
        }
      },
      Login: 'login'
    }
  }
}

关键配置说明 #

• MENU的path：改为More，直接对应Tab栏的More标签，而非之前的More/MyWallet
• 嵌套WalletStack：Tab导航器中More标签对应的组件是WalletStackScreen，需要在MENU下添加这个栈的配置，path设为MyWallet对应栈的初始页面
• PaymentMethod路径：作为WalletStack的子页面，配置独立的路径段（比如payment-method），也可以设为空字符串，但建议用有语义的名称便于识别

配套的Tab导航器检查 #

确保你的Tab导航器中，More标签的name和配置里的MENU一致，示例如下：

<Tab.Navigator>
  <Tab.Screen name="PROMOTIONS" component={PromotionsStackScreen} />
  {/* 这里的name必须和LinkingConfig里的'MENU'完全匹配 */}
  <Tab.Screen name="MENU" component={WalletStackScreen} />
</Tab.Navigator>

直接跳转PaymentMethod的路径 #

使用Linking.openURL跳转时，完整路径示例：

import { Linking } from 'react-native';

// 完整路径
const paymentMethodUrl = `${Linking.createURL('/')}home/More/MyWallet/payment-method`;
Linking.openURL(paymentMethodUrl);

// 或者省略prefix前缀（如果prefix已配置正确）
Linking.openURL('home/More/MyWallet/payment-method');

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