如何在react-native-navigation Stack中实现自定义导航组件？

问题原因分析 #

• 把<CustomTabBar>和<Stack.Navigator>同级放置时出现底部空白：Stack.Navigator默认占满全屏，TabBar叠加在下方后，Stack的内容区域没有预留TabBar的高度，导致底部内容被遮挡，同时可能因SafeAreaView的默认边距出现空白。
• 把<CustomTabBar>移入<Stack.Navigator>内报错：Stack.Navigator只允许<Stack.Screen>作为直接子组件，无法嵌套其他自定义组件。

可行实现方案 #

方案一：绝对定位固定TabBar + 内容区域留边距

通过绝对定位将TabBar固定在屏幕底部，同时给Stack的所有屏幕设置底部内边距，避免内容被TabBar遮挡。

修改导航组件代码：

import { View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function Navigator() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Stack.Navigator 
          screenOptions={{
            headerShown: false,
            // 给所有屏幕添加底部内边距，数值对应TabBar的高度
            contentStyle: { paddingBottom: 80 }
          }} 
          initialRouteName="Home"
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Feed" component={FeedScreen} />
        </Stack.Navigator>
        <CustomTabBar style={styles.tabBar} />
      </View>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },
  tabBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0
  }
});

调整CustomTabBar的SafeArea设置，只保留底部安全区域适配：

// 修改CustomTabBar中的SafeAreaView
<SafeAreaView style={styles.safeAreaView} edges={['bottom']}>
  {/* 原有TabBar内容 */}
</SafeAreaView>

// 对应的样式
const styles = StyleSheet.create({
  safeAreaView: {
    backgroundColor: '#fff', // 设置和页面一致的背景色，避免空白
    paddingHorizontal: 16
  },
  // ...其他原有样式
});

方案二：Flex布局分配空间

通过flex布局让Stack占满剩余屏幕空间，TabBar固定在底部，无需绝对定位。

修改导航组件：

export default function Navigator() {
  return (
    <NavigationContainer>
      <View style={{ flex: 1 }}>
        <Stack.Navigator 
          screenOptions={{
            headerShown: false,
            contentStyle: { flex: 1 }
          }} 
          initialRouteName="Home"
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Feed" component={FeedScreen} />
        </Stack.Navigator>
        <CustomTabBar />
      </View>
    </NavigationContainer>
  );
}

给CustomTabBar设置固定高度，避免它抢占Stack的空间：

// CustomTabBar的样式
const styles = StyleSheet.create({
  safeAreaView: {
    height: 80, // 固定TabBar高度
    backgroundColor: '#fff'
  },
  navContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around'
  },
  // ...其他原有样式
});

补充：TabBar跳转逻辑实现 #

要让TabBar的按钮能跳转到对应页面，需要在CustomTabBar中使用useNavigation钩子：

import { useNavigation } from '@react-navigation/native';

export const CustomTabBar = () => {
  const navigation = useNavigation();

  const onHomePress = () => {
    navigation.navigate('Home');
  };

  // 同理添加其他页面的跳转函数
  const onFeedPress = () => {
    navigation.navigate('Feed');
  };

  return (
    {/* 原有TabBar内容，将对应按钮的onPress绑定到跳转函数 */}
  );
};

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