React Navigation给Stack传参时component报无效组件错误如何解决

报错原因 #

你直接调用OrderStackComponent("My Parameter")时，得到的是已经渲染完成的JSX元素，而非React Navigation要求的component属性需要接收的组件构造类型，所以会触发合法性校验报错。
同时你最初对OrderStackComponent的参数定义也不符合React组件的规范：React函数组件的第一个参数永远是props对象，不能直接接收自定义的字符串参数。

解决方案 #

方案1：使用React Navigation原生传参机制（推荐） #

利用TopTabs Screen自带的initialParams传参，在OrderStackComponent中通过自动注入的route属性读取参数，符合框架设计规范，不会产生额外性能问题。
修改代码如下：

// 调整组件定义，接收React组件标准props，从route中取参数
const OrderStackComponent = ({ route }: { route: { params: { status: string } } }) => {
  const { status } = route.params;
  return <Stack.Navigator>
    <Stack.Screen name="OrdersScreen" component={Orders} initialParams={{status}}/>
    <Stack.Screen name="OrdersDetailsScreen" component={OrdersDetailsScreen} initialParams={{status}}/>
  </Stack.Navigator>
}

const OrderTopTabs = () => {
  return <TopTabs.Navigator>
    <TopTabs.Screen 
      name="InProgressTab" 
      component={OrderStackComponent} 
      options={{ title: "In Progress" }}
      // 通过initialParams给当前Tab对应的组件传参
      initialParams={{ status: "In Progress" }}
    />
    <TopTabs.Screen 
      name="CompletedTab" 
      component={OrderStackComponent} 
      options={{ title: "Completed" }}
      initialParams={{ status: "Completed" }}
    />
    <TopTabs.Screen 
      name="CancelledTab" 
      component={OrderStackComponent} 
      options={{ title: "Cancelled" }}
      initialParams={{ status: "Cancelled" }}
    />
  </TopTabs.Navigator>
}

方案2：高阶组件工厂模式 #

如果你需要完全隔离每个Stack的实例，可以写一个组件生成函数，返回独立的组件类型传入component属性：

// 组件工厂，接收参数返回独立的组件类型
const createOrderStack = (status: string) => {
  return () => (
    <Stack.Navigator>
      <Stack.Screen name="OrdersScreen" component={Orders} initialParams={{status}}/>
      <Stack.Screen name="OrdersDetailsScreen" component={OrdersDetailsScreen} initialParams={{status}}/>
    </Stack.Navigator>
  )
}

// 预生成每个Tab对应的Stack组件
const InProgressStack = createOrderStack("In Progress");
const CompletedStack = createOrderStack("Completed");
const CancelledStack = createOrderStack("Cancelled");

const OrderTopTabs = () => {
  return <TopTabs.Navigator>
    <TopTabs.Screen name="InProgressTab" component={InProgressStack} options={{ title: "In Progress" }}/>
    <TopTabs.Screen name="CompletedTab" component={CompletedStack} options={{ title: "Completed" }}/>
    <TopTabs.Screen name="CancelledTab" component={CancelledStack} options={{ title: "Cancelled" }}/>
  </TopTabs.Navigator>
}

注意该方案会生成多个独立组件，切换Tab时组件会重新挂载，内部状态会重置，适合需要完全隔离Tab上下文的场景。

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