如何使用react native嵌套导航

Question

这是我的AppNavigator.js

const StackNavigator = createStackNavigator(
{
LoginScreen: LoginScreen,
RegisterScreen: RegisterScreen,
Tabs:Tabs,
Detail:DetailScreen 
}, 
{ 
initialRouteName: 'LoginScreen',
headerMode: 'none',
});
export default createAppContainer(StackNavigator)

这是我的Tabs.js

<Tab.Navigator
tabBarOptions={{
showLabel: false,
style:{
position: 'absolute',
bottom:5,
left:5,
right:5,
elevation:0,
backgroundColor: '#068b71',
borderRadius:10,
height: 50,
...styles.shadow
}
}}>
<Tab.Screen name="Home" component={HomeScreen} 
options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image source={require('../assets/icons/home.png')} 
resizeMode='contain'
style={{
width:25,
height:25,
tintColor: focused ? '#ffffff' : '#748c94'
}}/>
<Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Home</Text>
</View>
)
}} >
</Tab.Screen>
<Tab.Screen name="Profile" component={ProfileScreen} 
options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image source={require('../assets/icons/profile.png')} 
resizeMode='contain'
style={{
width:25,
height:25,
tintColor: focused ? '#ffffff' : '#748c94'
}}/>
<Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Profile</Text>
</View>
)
}} />

</Tab.Navigator>

我想从主屏幕中存在的列表视图中导航

<TouchableOpacity style={styles.item} onPress={()=>{navigation.navigate('Detail')}}>

我得到了这个错误：任何导航器都未处理有效载荷为｛"name"："Detail"｝的操作"NAVIGATE"。有很多解决方案，但没有一个能起作用，请我坚持下去。

Answer 1

这里你可以喜欢这可能会帮助你

<TouchableOpacity style={styles.item} onPress={()=>navigation.navigate('DetailScreen')}>