Question

嗨，我正在尝试使用 React-Native 制作我的第一个应用程序但我是 React-Native 和 React 的新手所以我不太了解。

嵌套导航有问题。

我总结了来源以更容易地解释错误。

<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}/>
  );
}

我有这样的错误

导航器只能包含“屏幕”组件作为其直接子项（找到“屏幕列表”）。要在导航器中呈现此组件，请将其在 'component' 属性中传递给 'Screen'。

我想发送一个带有 ScreenList() 函数的 ScreenList 但错误说我无法发送屏幕

如何按功能发送屏幕列表？？？

或者有没有更好的方法在嵌套导航中导航屏幕？？

Answer 1

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

请参考 React 导航站点中的堆栈导航文档。并将此 StackNav() 函数替换为您的 StackNav() 函数。

如何处理深度嵌套的导航

1 个答案: