在多个 React Navigation 导航器中重复使用相同的屏幕，无需复制粘贴

Question

我目前有一个 BottomTabNavigator，其中有五个堆栈导航器。有些屏幕应该可以从每个选项卡访问，因此我基本上已将它们“复制粘贴”到每个导航器中。它工作正常，但我想避免复制粘贴代码。我希望它们在一个文件中指定，然后“导入”到每个导航器中。

为了说明，结构是：

// Tab 1
<Stack.Navigator>
  <Stack.Screen name="A" component={XXX} />
  <Stack.Screen name="B" component={XXX} />
  <Stack.Screen name="C" component={XXX} />
</Stack.Navigator>

// Tab 2
<Stack.Navigator>
  <Stack.Screen name="D" component={XXX} />
  <Stack.Screen name="B" component={XXX} />
  <Stack.Screen name="C" component={XXX} />
</Stack.Navigator>

我的第一个方法是：

// common-screens.tsx

export const CommonScreens = ({Stack}) => (
  <>
    <Stack.Screen name="B" component={XXX} />
    <Stack.Screen name="C" component={XXX} />
  </>
)

// navigators.tsx

// Tab 1
<Stack.Navigator>
  <Stack.Screen name="A" component={XXX} />
  <CommonScreens Stack={Stack} />
</Stack.Navigator>

// Tab 2
<Stack.Navigator>
  <Stack.Screen name="D" component={XXX} />
  <CommonScreens Stack={Stack} />
</Stack.Navigator>

但是，这会导致错误

A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'CommonScreens')

您建议如何实施？

Answer 1

我建议你创建一个函数来生成

<Stack.Screen/>

的列表。

const getScreens = (screenArray) => {
  return screenArray.map((props) => {
    return <Stack.Screen {...props} />
  })
}

然后使用如下所示的功能

<Stack.Navigator>
  {getScreens([
    { name: 'A', component: 'X' },
    { name: 'B', component: 'XX' },
    { name: 'C', component: 'XXX' },
  ])}
</Stack.Navigator>

为了进一步简化操作，您可以拥有所有名称和组件的映射。 只需在数组中传递名称并根据它映射组件即可。

示例：

<Stack.Navigator>
  {getScreens(['A', 'B', 'C'])}
</Stack.Navigator>

请注意，此代码只是为了给您一个想法。 我没有测试过这段代码。