导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级

Question

<Stack.Navigator>
  {
    isLogin ? <ComponentA /> :  <ComponentB />
  }
</Stack.Navigator>


const ComponentA = () => (
 arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

const ComponentB = () => (
 arrB.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

我想在组件A和组件B中使用一些钩子，所以我必须将它们用作功能组件，请问有什么帮助吗？

源代码

Answer 1

一个选项可能是内联渲染组件：

<Stack.Navigator>
  {
    isLogin ? ComponentA({}) :  ComponentB({})
  }
</Stack.Navigator>

Answer 2

你到底想做什么？请详细说明。

无论如何，我认为总体方向是：

const componentA = props => {
// Whatever you wanna do

return (<>
{arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)}
</>)

}

同样适用于componentB