无法使用 React Native 从 Navigation 5 中的抽屉内部导航

Question

您好，我似乎无法使用下面所述的选项代码导航到另一个屏幕，有人知道为什么这不起作用吗？我还收到一条错误消息，指出“允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需求。”但我不认为这是导致问题的原因，因为导航无论如何都可以正常工作，每次我点击导航上的一个按钮时，它甚至不会给我一个错误或任何东西。

使用登录后的标签导航/主屏幕

const Tab = createBottomTabNavigator();

const UserNavigator = () => (

<Tab.Navigator tabBarOptions={{
    activeTintColor: 'black',
    inactiveTintColor: 'grey',
    tabStyle: {borderColor:'grey', borderWidth:0.5,},
    style: {
        backgroundColor: 'lightblue'}}}  >
 <Tab.Screen 
 name="Feed" 
 component={FeedNavigator}
 options= {{
     tabBarIcon: ({color, size}) =>
     <MaterialCommunityIcons name="home" color={color} size={size} />
    }}/>
 
 <Tab.Screen 
 name="Account" 
 component={AccountNavigator} 
 options= {{
     tabBarIcon: ({color, size}) =>
     <MaterialCommunityIcons name="account" color={color} size={size} />
    }}/>
 
 <Tab.Screen 
 name="Settings" 
 component={SettingsNavigator} 
 options= {{
     tabBarIcon: ({color, size}) =>
     <MaterialCommunityIcons name="cog-outline" color={color} size={size} />
    }}/>

 </Tab.Navigator>

抽屉内容

export function DrawerContent({props}) {
    return(
        <View style={{flex:1, top: 25}}>
                <View style={styles.drawerContent}>
                <View style={styles.userInfoSection}>
                        <View style={{flexDirection:'row',marginTop: 15,}}>
                            <Avatar.Image 
                                source={{
                                    uri: 'https://scontent-lcy1-1.xx.fbcdn.net/v/t1.6435-9/66377084_2811566162247295_7686084060568879104_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=Xy7R59FbVcgAX-Xknlk&_nc_ht=scontent-lcy1-1.xx&oh=4502184d110eb6cf3e57db98063f1e29&oe=6092F725'
                                }}
                                size={50}
                            />
                            <View style={{marginLeft:15, flexDirection:'column'}}>
                                <Title style={styles.title}>Marc Brolly</Title>
                                <Caption style={styles.caption}>@brolly301</Caption>
                            </View>
                        </View>
                    </View>
                    <View style={styles.row}>
                            <View style={styles.section}>
                                <Paragraph style={[styles.paragraph, styles.caption2]}>120</Paragraph>
                                <Caption style={styles.caption2}>Artists Followed</Caption>
                            </View>
                        </View>

                 <Drawer.Section style={styles.drawerSection}>
                  <DrawerItem 
                icon={({color, size}) => (
                    <Icon name="home-outline"
                    color={color}
                    size={size}
                    onPress={() => {}}/>
                )}
                label="Home"/>
                
                </Drawer.Section>    
                 
                 <Drawer.Section style={styles.drawerSection}>
                  <DrawerItem 
                icon={({color, size}) => (
                    <Icon name="account-outline"
                    color={color}
                    size={size}
                    onPress={() => {props.navigation.navigate('Account')}}/>
                )}
                label="Profile"/>

主身份验证导航器

const Stack = createStackNavigator();

const AuthNavigator = () => (

<Stack.Navigator>

<Stack.Screen name="Welcome" component={LoginPage} options={{ headerShown: false }}/>
<Stack.Screen name="Register" component={RegistrationForm} 
options={{headerStyle: {backgroundColor: 'lightblue'}, 
headerTitle: (
    <View style={styles.logo}>
       <Image style={styles.logo} source={require("../assets/logo.png")}/>
    </View>),
headerTitleStyle: { alignSelf: 'center', top: 0,  },
headerRight: () => (
    <Icon style={styles.icon} 
      name="help-circle-outline"  
      size={80}
      iconColor="black"/>) }}/>

<Stack.Screen name="UserNav" component={DrawerNavigator} 
options={{headerStyle: {backgroundColor: 'lightblue'}, 
headerTitle: (
    <View style={styles.logo}>
       <Image style={styles.logo} source={require("../assets/logo.png")}/>
    </View>),
headerShown: false}}/>  

<Stack.Screen name="ForgotPass" component={ForgotPassNav} options={{ headerShown: false }}
options={{headerStyle: {backgroundColor: 'lightblue'}, 
headerTitle: (
    <View style={styles.logo}>
       <Image style={styles.logo} source={require("../assets/logo.png")}/>
    </View>),
headerTitleStyle: { alignSelf: 'center', top: 0,  },
headerRight: () => (
    <Icon style={styles.icon} 
      name="help-circle-outline"  
      size={0}
      iconColor="black"/>) }}/>

<Stack.Screen name="Confirm" component={ForgotPasswordConfirmation} options={{ headerShown: false }}/>


</Stack.Navigator>

Answer 1

您应该添加更多详细信息。你可以发布整个文件吗？ 无论如何，我认为您的问题与从导航器中的屏幕导航到另一个导航器中的另一个屏幕有关。如果两个屏幕不在同一个导航器上，您应该使用：

navigation.navigate('NavigatorName', {
  screen: 'ScreenName',
  params: {item: item},
});

而不是

navigation.navigate('ScreenName', {item: item});

Answer 2

找出问题所在。我尝试使用 navigation.navigate('ScreenName') 将导航传递到抽屉内容顶部的函数中，它起作用了