如何处理深度嵌套的导航

Question

Hi Im trying to make my first app with React-Native But I'm new on React-Native and React also so i dont know much about it.

I having a problem with nested navigation.

I summarize the source to explain an error easier.

<Tab.Navigator>
  <Tab.Screen name='Tab1' component={StackNav}/>
  <Tab.Screen name='Tab2' component={TabScreen}/>
</Tab.Navigator>

function StackNav(){
  return(
    <Stack.Navigator>
       <Stack.Screen name='Screen1'>
       <ScreenList/>     ----> this part is an error 
    </Stack.Navigator> 
  );
}

function Screen1(){
  return(
    <View><Text>This is Screen1</Text></View>
  );
}
function ScreenList(){
  return(
    <Stack.Screen name='Screen2' component={Screen2}/>
    <Stack.Screen name='Screen3' component={Screen3}/>
  );
}

I am having and error like this

A navigator can only contain 'Screen' components as its direct children (found 'ScreenList'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.

i want to send a ScreenList with a function ScreenList() but the error said I can't send a screen

how can I send a Screen list by function???

or is there any better way to navigate screen in nested navigation??

Answer 1

function StackNav(){
  return(
    <Stack.Navigator>
       <Stack.Screen name='Screen1' component={ScreenList}/>
    </Stack.Navigator> 
  );
}

Please refer to the stack navigation documentation in react navigation site. And replace this StackNav() function with your StackNav() function.