React Native中如何在App.js里结合Stack与Bottom Tab导航器

我来帮你一步步修改代码，实现Bottom Tab和Stack Navigator的结合～首先你需要先配套安装react-navigation-tabs包（和你当前用的React Navigation 4.x版本兼容），在终端运行：

npm install react-navigation-tabs
# 或者用yarn
yarn add react-navigation-tabs

核心思路 #

把原来Stack Navigator里的Home页面，替换成一个包含多个Tab的Bottom Tab Navigator；每个Tab既可以是单个页面，也能嵌套独立的Stack Navigator（方便Tab内部的页面跳转）。

步骤1：导入Bottom Tab组件 #

在App.js顶部添加导入语句：

import {createBottomTabNavigator} from 'react-navigation-tabs';
// 可选：如果要给Tab加图标，导入图标库（比如Ionicons）
// import Ionicons from 'react-native-vector-icons/Ionicons';

步骤2：准备Tab对应的子页面 #

假设你希望Home页面包含3个Tab（比如首页、我的、设置），先导入这些子页面（替换成你自己实际的页面即可）：

import HomeFeed from './screens/HomeFeed';
import Profile from './screens/Profile';
import Settings from './screens/Settings';

步骤3：创建Bottom Tab Navigator #

定义底部标签导航器，配置每个Tab的显示和样式：

const HomeTabNavigator = createBottomTabNavigator(
  {
    Feed: {
      screen: HomeFeed,
      navigationOptions: {
        tabBarLabel: '首页',
        // 可选：添加图标
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="home" size={24} color={tintColor} />
        // )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: '我的',
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="person" size={24} color={tintColor} />
        // )
      }
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: '设置',
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="settings" size={24} color={tintColor} />
        // )
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: '#2196F3', // 选中Tab的高亮颜色
      inactiveTintColor: '#999', // 未选中Tab的颜色
      style: {
        backgroundColor: '#fff', // Tab栏背景色
        borderTopWidth: 0.5,
        borderTopColor: '#eee',
        height: 60 // 自定义Tab栏高度
      }
    }
  }
);

步骤4：修改原Stack Navigator的Home配置 #

把原来Stack Navigator里的Home对应的screen替换成我们刚创建的HomeTabNavigator，同时修正你之前写错位置的initialRouteName：

const navigator = createStackNavigator({
  loading: {
    screen: Loading,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  signup: {
    screen: Signup,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  login: {
    screen: Login,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Home: {
    screen: HomeTabNavigator, // 这里替换为Tab导航器
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
}, {
  initialRouteName: 'loading' // 注意：这个配置要放在Stack的第二个参数对象里
});

完整修改后的代码 #

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
// 可选：导入图标库
// import Ionicons from 'react-native-vector-icons/Ionicons';

// 原有页面导入
import Signup from './screens/signup';
import Login from './screens/login';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';

// Tab子页面导入（替换成你自己的页面）
import HomeFeed from './screens/HomeFeed';
import Profile from './screens/Profile';
import Settings from './screens/Settings';

// 创建Bottom Tab导航器
const HomeTabNavigator = createBottomTabNavigator(
  {
    Feed: {
      screen: HomeFeed,
      navigationOptions: {
        tabBarLabel: '首页',
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="home" size={24} color={tintColor} />
        // )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: '我的',
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="person" size={24} color={tintColor} />
        // )
      }
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: '设置',
        // tabBarIcon: ({tintColor}) => (
        //   <Ionicons name="settings" size={24} color={tintColor} />
        // )
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: '#2196F3',
      inactiveTintColor: '#999',
      style: {
        backgroundColor: '#ffffff',
        borderTopWidth: 0.5,
        borderTopColor: '#eee'
      }
    }
  }
);

// 主Stack导航器
const navigator = createStackNavigator({
  loading: {
    screen: Loading,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  signup: {
    screen: Signup,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  login: {
    screen: Login,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Home: {
    screen: HomeTabNavigator,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
}, {
  initialRouteName: 'loading'
});

const AppContainer = createAppContainer(navigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

额外小提示 #

如果某个Tab需要内部页面跳转（比如首页跳转到详情页），可以给该Tab单独嵌套一个Stack Navigator，示例：

// 给Feed Tab创建独立Stack
const FeedStack = createStackNavigator({
  Feed: HomeFeed,
  FeedDetail: FeedDetailPage // 你的详情页组件
});

// 然后在HomeTabNavigator里把Feed的screen换成FeedStack即可

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