无法使用 React Native 从导航 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"/>

主Auth Navigator

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.navigation("屏幕名称"(，并将导航传递到drawerContent顶部的函数中，它起到了的作用