如何在同一React Native屏幕中同时添加头部导航与底部导航组件

嗨，我来帮你梳理下实现这个需求的最佳方案，用React Navigation配合Expo就能轻松搞定～咱们一步步来：

第一步：安装必要的依赖 #

首先得把React Navigation的核心包和栈导航包装上，在你的Expo项目根目录里运行这些命令：

expo install @react-navigation/native react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

第二步：搭建基础导航结构 #

咱们先创建一个栈导航容器，把需要的四个屏幕都加进去。这里重点是给Screen3和Screen4设置modal弹出模式，这样它们就能从底部滑上来了。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';
import Screen3 from './screens/Screen3';
import Screen4 from './screens/Screen4';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Screen1">
        {/* 主屏幕Screen1 */}
        <Stack.Screen 
          name="Screen1" 
          component={Screen1}
          // 留空以便自定义头部
          options={{ header: () => null }} 
        />
        {/* 普通跳转的Screen2 */}
        <Stack.Screen name="Screen2" component={Screen2} />
        {/* 从底部滑入的Screen3 */}
        <Stack.Screen 
          name="Screen3" 
          component={Screen3}
          options={{
            presentation: 'modal',
            // 设置底部滑入动画
            animation: 'slide_from_bottom'
          }}
        />
        {/* 同样从底部滑入的Screen4 */}
        <Stack.Screen 
          name="Screen4" 
          component={Screen4}
          options={{
            presentation: 'modal',
            animation: 'slide_from_bottom'
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

第三步：自定义Screen1的头部导航 #

现在咱们给Screen1加上自定义的头部，包含标题和右侧的跳转按钮（可以是文字或者图标），点击就能跳转到Screen2：

// screens/Screen1.js
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // 用Expo内置图标库

export default function Screen1({ navigation }) {
  return (
    <SafeAreaView style={styles.container}>
      {/* 自定义头部栏 */}
      <View style={styles.header}>
        <Text style={styles.headerTitle}>主屏幕</Text>
        {/* 右侧跳转按钮：图标+文字组合 */}
        <TouchableOpacity 
          style={styles.headerBtn}
          onPress={() => navigation.navigate('Screen2')}
        >
          <Ionicons name="arrow-forward" size={20} color="#fff" />
          <Text style={styles.headerBtnText}>去屏幕2</Text>
        </TouchableOpacity>
      </View>

      {/* 屏幕主体内容区 */}
      <View style={styles.mainContent}>
        <Text>这是屏幕1的内容</Text>
      </View>

      {/* 底部跳转按钮区域 */}
      <View style={styles.bottomNav}>
        <TouchableOpacity 
          style={styles.bottomBtn}
          onPress={() => navigation.navigate('Screen3')}
        >
          <Ionicons name="apps" size={24} color="#333" />
          <Text style={styles.bottomBtnText}>去屏幕3</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={styles.bottomBtn}
          onPress={() => navigation.navigate('Screen4')}
        >
          <Ionicons name="settings" size={24} color="#333" />
          <Text style={styles.bottomBtnText}>去屏幕4</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#2196F3',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  headerBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  headerBtnText: {
    color: '#fff',
    fontSize: 16,
  },
  mainContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingVertical: 16,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  bottomBtn: {
    alignItems: 'center',
    gap: 4,
  },
  bottomBtnText: {
    fontSize: 14,
    color: '#333',
  },
});

第四步：完善其他屏幕组件 #

剩下的Screen2、Screen3、Screen4就简单了，比如给Screen2加返回按钮，给Screen3/4加关闭按钮：

// screens/Screen2.js
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Screen2({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>这是屏幕2</Text>
      <TouchableOpacity 
        style={styles.backBtn}
        onPress={() => navigation.goBack()}
      >
        <Text style={styles.btnText}>返回屏幕1</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backBtn: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#2196F3',
    borderRadius: 5,
  },
  btnText: {
    color: '#fff',
  },
});

// screens/Screen3.js
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Screen3({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>这是屏幕3（从底部滑入）</Text>
      <TouchableOpacity 
        style={styles.closeBtn}
        onPress={() => navigation.goBack()}
      >
        <Text style={styles.btnText}>关闭</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  closeBtn: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#2196F3',
    borderRadius: 5,
  },
  btnText: {
    color: '#fff',
  },
});

Screen4的代码和Screen3基本一致，修改文字即可。

小提示 #

• 如果想要半屏弹出的更复杂效果，可以试试@gorhom/bottom-sheet库，但你的需求用React Navigation的modal模式已经足够简单高效。
• 图标可以从@expo/vector-icons里选，里面包含了几乎所有常用的图标类型。

内容来源于stack exchange