从子堆栈导航到父堆栈中的组件屏幕
Navigate to component screen in parent stack from child stack
我正尝试从我的 topTab 导航导航到我的 Stack Navigation 上的屏幕,但找不到绕过它的方法。我尝试使用 navigation.getParent() 但它会抛出此错误 TypeError: undefined is not an object (evaluating 'navigation.getParent().navigate')
这是我的代码来正确解释:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="interests" component={Interests} />
<Stack.Screen name="importSubscriptions" component={ImportSubscriptions} />
<Stack.Screen name="subscriptions" component={Subscriptions} />
<Stack.Screen name="bottomTab" component={MainBottomTab} />
<Stack.Screen name="podcastItem" component={PodcastItemCard}/>
<Stack.Screen name="player" component={Player} />
<Stack.Screen name="tabNavigator" component={UsersInterestTab} />
</Stack.Navigator>
<Tab.Navigator
initialRouteName="Feed"
initialLayout={{ width: Dimensions.get('window').width }}
screenOptions={{
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.gray_2,
activeBackgroundColor: Colors.blue_primary,
tabBarScrollEnabled: true,
headerShown: false,
tabBarIndicatorStyle: {
width: 0,
height: 0,
elevation: 0,
},
tabBarItemStyle: { alignItems: 'center', },
tabBarLabelStyle: { margin: 0, fontSize: fontSize.xsmall, fontFamily: fontFamily.EuclidCircularARegular, color: Colors.gray_2 },
tabBarStyle: {
backgroundColor: Colors.white,
padding: 0,
elevation: 0, // for Android
shadowOffset: {
width: 0,
height: 0 // for iOS
},
width: '100%'
}
}}
>
<Tab.Screen
name={'For you'}
component={DiscoverContent}
initialParams={{ id: 177 }}
options={{
tabBarLabel: ({ color, focused }) => (
<Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>For you</Text>
),
}}
/>
{
usersInterests.map((item) => (
<Tab.Screen
key={item.id}
name={item.name}
component={DiscoverContent}
initialParams={{ id: item.id }}
options={{
tabBarLabel: ({ color, focused }) => (
<Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>{item.name}</Text>
),
}}
/>
))
}
</Tab.Navigator>
我正在尝试从 tabNavigator 屏幕访问播放器组件。我该怎么做?
你能试试useNavigation钩子吗?它非常适合我
用法
import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate("interests");
//or
navigation.push("interests");
问题基本上是我的导航结构。我重组了导航,没有将每个 Navigator 包装在一个单独的 NavigationaContainer 中(同时传递 Independent 道具)并且它起作用了。
您可以使用 useNavigation()
ref:-https://reactnavigation.org/docs/use-navigation/
从“@react-navigation/native”导入{useNavigation};
useNavigation().goBack();
我正尝试从我的 topTab 导航导航到我的 Stack Navigation 上的屏幕,但找不到绕过它的方法。我尝试使用 navigation.getParent() 但它会抛出此错误 TypeError: undefined is not an object (evaluating 'navigation.getParent().navigate')
这是我的代码来正确解释:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="interests" component={Interests} />
<Stack.Screen name="importSubscriptions" component={ImportSubscriptions} />
<Stack.Screen name="subscriptions" component={Subscriptions} />
<Stack.Screen name="bottomTab" component={MainBottomTab} />
<Stack.Screen name="podcastItem" component={PodcastItemCard}/>
<Stack.Screen name="player" component={Player} />
<Stack.Screen name="tabNavigator" component={UsersInterestTab} />
</Stack.Navigator>
<Tab.Navigator
initialRouteName="Feed"
initialLayout={{ width: Dimensions.get('window').width }}
screenOptions={{
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.gray_2,
activeBackgroundColor: Colors.blue_primary,
tabBarScrollEnabled: true,
headerShown: false,
tabBarIndicatorStyle: {
width: 0,
height: 0,
elevation: 0,
},
tabBarItemStyle: { alignItems: 'center', },
tabBarLabelStyle: { margin: 0, fontSize: fontSize.xsmall, fontFamily: fontFamily.EuclidCircularARegular, color: Colors.gray_2 },
tabBarStyle: {
backgroundColor: Colors.white,
padding: 0,
elevation: 0, // for Android
shadowOffset: {
width: 0,
height: 0 // for iOS
},
width: '100%'
}
}}
>
<Tab.Screen
name={'For you'}
component={DiscoverContent}
initialParams={{ id: 177 }}
options={{
tabBarLabel: ({ color, focused }) => (
<Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>For you</Text>
),
}}
/>
{
usersInterests.map((item) => (
<Tab.Screen
key={item.id}
name={item.name}
component={DiscoverContent}
initialParams={{ id: item.id }}
options={{
tabBarLabel: ({ color, focused }) => (
<Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>{item.name}</Text>
),
}}
/>
))
}
</Tab.Navigator>
我正在尝试从 tabNavigator 屏幕访问播放器组件。我该怎么做?
你能试试useNavigation钩子吗?它非常适合我
用法
import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate("interests");
//or
navigation.push("interests");
问题基本上是我的导航结构。我重组了导航,没有将每个 Navigator 包装在一个单独的 NavigationaContainer 中(同时传递 Independent 道具)并且它起作用了。
您可以使用 useNavigation()
ref:-https://reactnavigation.org/docs/use-navigation/
从“@react-navigation/native”导入{useNavigation};
useNavigation().goBack();