我想在 react native 中根据路由名称渲染特定组件

Question

它完成了工作，但是当有超过 10 个组件时，调试代码变得很困难。一个有效的方法将被应用。

                name={route.name}
                component={
                    route.name == 'Cart'
                        ? Cart
                        : route.name == 'Checkout'
                        ? Checkout
                        : Home
                }
                options={{
                    title: route.name, //Set Header Title
                }}
            />```

Answer 1

如果要检查的条件超过 5 个，则使用条件运算符 ?: 可能会很棘手。
所以我更喜欢使用switch 的情况来检查route 名称并将相应的组件分配给variable，并在要显示组件的地方使用该变量。

let route = route.name;
let dyanamic_compoent;
switch(route){
  case "route_name":
     dyanamic_compoent = your_compoent_name;
     break;
  case "route_name":
     dyanamic_compoent = your_compoent_name;
     break;
  default:
     dyanamic_compoent = default_your_compoent_name;
}

根据您的需要将此代码放置在您的组件中。并在您的代码中进一步使用dyanamic_component。
如果这不是您想要的，请告诉我并添加更多代码，以便我们找出解决方案。