Stack Navigator嵌套Tab Navigator渲染空白屏问题排查

你遇到的空白屏问题，核心原因是**Main组件没有返回Tab导航器的JSX元素**。

你的Main是用箭头函数定义的，并且用了大括号{}包裹代码块，但没有写return语句——箭头函数在使用大括号时，不会自动返回代码块内的内容，默认返回undefined，所以Stack导航器渲染的是一个空组件，自然显示空白。

修正后的代码 #

有两种修正方式：

方式1：显式添加return

function App(){

 const Main = () =>{
   // 手动return Tab.Navigator
   return (
     <Tab.Navigator initialRouteName="Players">
        <Tab.Screen name="Players" component={FindPlayers} />
        <Tab.Screen name="Requests" component={MatchRequests} />
     </Tab.Navigator>
   )
 }

 // ...其他代码

return (
<NavigationContainer>
 <Stack.Navigator initialRouteName="Main" >
  <Stack.Screen name="Main" component={Main}/>
  <Stack.Screen name="CourtPicker" component={CourtPicker}/>
 </Stack.Navigator>
</NavigationContainer>
)}

方式2：用隐式返回（去掉大括号）

如果组件逻辑简单，也可以去掉大括号，让箭头函数自动返回JSX：

function App(){

 // 去掉大括号，直接返回Tab.Navigator
 const Main = () => (
   <Tab.Navigator initialRouteName="Players">
      <Tab.Screen name="Players" component={FindPlayers} />
      <Tab.Screen name="Requests" component={MatchRequests} />
   </Tab.Navigator>
 )

 // ...其他代码

return (
<NavigationContainer>
 <Stack.Navigator initialRouteName="Main" >
  <Stack.Screen name="Main" component={Main}/>
  <Stack.Screen name="CourtPicker" component={CourtPicker}/>
 </Stack.Navigator>
</NavigationContainer>
)}

修正后，Stack导航器的Main路由会正常渲染Tab导航器，而Tab导航器会自动加载它的初始路由Players对应的FindPlayers组件，不会再显示空白屏。如果需要修改Stack导航栏的标题，可以在Stack.Screen的options里配置，比如：

<Stack.Screen 
  name="Main" 
  component={Main}
  options={{ title: "球员匹配" }} // 自定义标题
/>

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