React Native：尝试将 Stack Navigation 传递到 Bottom tab Navigation

Question

我在尝试将 Stack Navigator 传递到 Bottom Tab Navigator 时遇到问题。 我不断收到以下错误。 我哪里错了？

我创建了 Stack 导航组件，然后将其导入到我的底部选项卡导航中，然后将组件传递到那里。 我认为一切都正确，但错误开始了

底部标签导航器

import * as React from 'react';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { LeftNavigator } from '../stack.navigation.js/stack';


const Tab = createMaterialBottomTabNavigator();

export const BottomNavigator = () => {
 return (
     <>
 <Tab.Navigator initialRouteName="Left" activeColor="white" >
          
        <Tab.Screen name="Left Screen" component={LeftNavigator} />

       //here im trying to pass in my stack navigator component to my bottom tab navigator 
          
 </Tab.Navigator>   
     </>
 )
}

堆栈导航器

import * as React from 'react';
import { CnnScreen } from '../news.screens.js/cnn';
import  { Reuters } from '../news.screens.js/reuters';
import   { TheVerge } from '../news.screens.js/the.verge'
import { StyleSheet, Text, SafeAreaView, ScrollView, View, Image, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { LeftScreen } from '../left/left.screen';

import { createNativeStackNavigator } from '@react-navigation/native-stack';


const LeftStack = createNativeStackNavigator();

export const LeftNavigator = () => {
    
  <LeftStack.Navigator initialRouteName='Left'>
        <LeftStack.Screen name="Left" component={LeftScreen}/>
        <LeftStack.Screen name="CNN" component={CnnScreen}/>
        <LeftStack.Screen name="Reuters" component={Reuters}/>
        <LeftStack.Screen name="TheVerge" component={TheVerge}/>
  </LeftStack.Navigator>    

}

Answer 1

Answer for above comment : I added the return, and fixed the first issues as well, but now when i try to navigate to the Left it crashes? 
please pass it like this i.e pass children and remove this line component={OrderNavigatorComponent}.
<tab.Screen
    name="home"
       children={()=><ComponentName propName={propValue}/>}
    />
or 
 children={() => (
            <OrderContextProvider>
              <OrderNavigator />
            </OrderContextProvider>
          )}

=> 这里 orderNavigator 是你的 stack.navigator 即 const OrderNavigator = () => { return ( <Stack.Navigator initialRouteName="order"> <Stack.Screen name={'order'} component={Trial} options={{ headerShown: false}}/> </Stack.Navigator> ); };

Answer 2

您的代码中有两个问题。
第一个代码需要修复：
[底部标签导航器]

 ...
    const Tab = createMaterialBottomTabNavigator();
    
    export const BottomNavigator = () => {
     return (
         <>                                 
                                            |
                                            |
                                            |
                                            *
  ---->   <Tab.Navigator initialRouteName="Left" activeColor="white" >
 replace it to: "Left Screen" as your tab screen name
              
     <Tab.Screen name="Left Screen" component={LeftNavigator} />
    
           //here im trying to pass in my stack navigator component to my bottom tab navigator 
              
     </Tab.Navigator>   
         </>
     )
    }

第二：
堆栈导航器

    ....
    const LeftStack = createNativeStackNavigator();
    
    export const LeftNavigator = () => {

     //---> Add return     
return <LeftStack.Navigator initialRouteName='Left'>
            <LeftStack.Screen name="Left" component={LeftScreen}/>
            <LeftStack.Screen name="CNN" component={CnnScreen}/>
            <LeftStack.Screen name="Reuters" component={Reuters}/>
            <LeftStack.Screen name="TheVerge" component={TheVerge}/>
      </LeftStack.Navigator>    
}