TabNavigator内嵌StackNavigator时页面跳转失败求助

嘿，我来帮你搞定这个跳转失效的问题！你现在的核心问题是把Feed组件直接当成了Tab的页面容器，导致它的导航能力只局限在Tab切换上，没法触发栈页面的跳转。咱们只需要给每个需要跳转的Tab页面套一层StackNavigator就行，具体步骤如下：

1. 给Feed页面创建专属的StackNavigator #

首先，把Feed和它要跳转到的UserDetails页面放进同一个StackNavigator里，这样它们就属于同一个导航栈了：

react-navigation v4 写法 #

// 先导入必要的组件和导航器
import { StackNavigator, TabNavigator } from 'react-navigation';
import Feed from './Feed';
import UserDetails from './UserDetails';
// 导入你的Me组件...

// 创建Feed的导航栈
const FeedStack = StackNavigator({
  Feed: { screen: Feed }, // 栈的首页是Feed
  UserDetails: { screen: UserDetails } // 要跳转的详情页
});

react-navigation v6 写法（主流版本） #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/native';

// 定义Feed的栈组件
const FeedStack = createStackNavigator();
function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen name="Feed" component={Feed} />
      <FeedStack.Screen name="UserDetails" component={UserDetails} />
    </FeedStack.Navigator>
  );
}

2. 修改TabNavigator的配置 #

把原来Tab里的Feed组件替换成咱们刚创建的栈组件：

react-navigation v4 版本 #

export const Tabs = TabNavigator({
  Feed: { screen: FeedStack }, // 这里换成栈组件
  Me: { screen: Me } // 如果Me页面也需要跳转，同样可以给它套Stack
});

react-navigation v6 版本 #

const Tab = createBottomTabNavigator();
export function Tabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedStackScreen} />
      <Tab.Screen name="Me" component={Me} />
    </Tab.Navigator>
  );
}

3. 在Feed页面里触发跳转 #

现在Feed组件的props里已经有完整的栈导航能力了，直接在按钮点击事件里调用navigate就行：

// Feed.js里的按钮处理逻辑
handleGoToUserDetails = () => {
  this.props.navigation.navigate('UserDetails');
};

// 渲染按钮
<Button title="查看用户详情" onPress={this.handleGoToUserDetails} />

这样点击按钮后，就能正常跳转到UserDetails页面啦！从详情页返回的话，直接用this.props.navigation.goBack()就可以，和普通的栈导航操作完全一致。

内容的提问来源于stack exchange，提问作者Imam Muhtadi