如何决定在 React Navigation 中动态渲染哪个组件？

Question

这是我的结构：

const RootStack = () => ( 
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeTabs} />
    <Stack.Screen name="AddNote" component={AddNoteScreen} />
  </Stack.Navigator>
);

const HomeTabs = () => ( 
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeStack}/>
    <Tab.Screen name="Customers" component={CustomersStack}/>
  </Tab.Navigator>
);

const HomeStack = () => (
  <Stack.Navigator>
     <Stack.Screen name="Home" component={HomeScreen}/>
     <Stack.Screen name="Tickets" component={TicketsStack}/>
  </Stack.Navigator>
);

const CustomerStack = () => (
  <Stack.Navigator>
     <Stack.Screen name="Customer" component={CustomerScreen}/>
     <Stack.Screen name="Tickets" 
       initialParams={{ parentRouteConfig: true }} 
       component={TicketsStack}
      />
  </Stack.Navigator>
);

const TicketStack = (props) => {
  const { route } = props;
  const { params } = route;

  return (
    <Stack.Navigator> 
      <Stack.Screen 
      name={params?.parentRouteConfig ? 'CustomerTickets' : 'Tickets'}
      component={params?.parentRouteConfig ? CustomerTicketsScreen : TicketsScren} 
      />
      <Stack.Screen name="TicketDetail" component={TicketDetailScreen} />
    </Stack.Navigator>
  );
};

问题是：在票证堆栈中，我需要决定应该渲染哪个屏幕。仅供参考：从抽屉或任何其他高级导航器导航，我需要给屏幕取不同的名字。当前的实施解决了我遇到的问题。但它闻起来，我知道对此有更好的解决方案，但我找不到。实现这一目标的最佳做法是什么？我可以使用不同的技术代替 initialParams 吗？

Answer 1

基于 react-navigation documentation，我正在为所有“条件屏幕”执行以下操作。

 <Stack.Navigator>
    {params?.yourConditionVariable ? (
      <Stack.Screen
        name="CustomerTickets"
        component={CustomerTicketsScreen}
      />
    ) : (
      <Stack.Screen name="Tickets" component={TicketsScreen} />
    )}
  </Stack.Navigator>

很好用，是我这边RN v5最大的特色。我真的很喜欢这种灵活性！

如何决定在 React Navigation 中动态渲染哪个组件？

How to decide which component should be rendered dynamically in React Navigation?

react-native

react-navigation

react-navigation-v5