如何移除React Native应用中默认显示的‘index’标题栏

针对你遇到的默认显示"index"标题栏且Stack Navigation设置无效的问题，这个标题栏并非来自导航库，而是原生系统的默认标题栏，可通过以下方法解决：

一、修改项目配置文件（永久生效） #

1. React Native CLI 项目 #

Android端

打开android/app/src/main/AndroidManifest.xml，找到<activity>标签：

• 若要隐藏标题栏：添加android:theme="@style/Theme.AppCompat.NoActionBar"属性
• 若要修改标题内容：修改android:label属性值为你需要的名称

示例修改后的代码片段：

<activity
    android:name=".MainActivity"
    android:label="你的应用名称"
    android:theme="@style/Theme.AppCompat.NoActionBar"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">

iOS端

打开ios/[你的项目名]/Info.plist：

• 若要隐藏标题栏：添加UINavigationBarHidden字段，设置值为YES
• 若要修改标题内容：修改CFBundleDisplayName字段值

2. Expo 项目 #

打开app.json（或app.config.js），在expo字段下添加/修改对应配置：

{
  "expo": {
    "name": "你的应用名称",
    "ios": {
      "infoPlist": {
        "UINavigationBarHidden": true
      }
    },
    "android": {
      "navigationBarHidden": true
    }
  }
}

二、在代码中动态隐藏（临时生效） #

Expo 项目专用 #

安装expo-navigation-bar工具库：

npx expo install expo-navigation-bar

在App组件中调用隐藏方法：

import React, { useEffect } from 'react'
import { View, Text, StyleSheet, StatusBar } from 'react-native';
import * as NavigationBar from 'expo-navigation-bar';

export default function App() {
  useEffect(() => {
    // 隐藏原生标题栏
    NavigationBar.hideAsync();
  }, []);

  return(
    <View style={styles.container}>
      <Text style={styles.headerText}>This is the header text</Text>
      <Text>Hello World</Text>
      <Text>Is this under? Yes it is</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

通用原生方法（React Native CLI/Expo 均可） #

利用Platform判断系统，调用原生模块隐藏标题栏：

import React, { useEffect } from 'react'
import { View, Text, StyleSheet, StatusBar, Platform, NativeModules } from 'react-native';

export default function App() {
  useEffect(() => {
    if (Platform.OS === 'android') {
      // Android 隐藏标题栏
      NativeModules.StatusBarManager.setHidden(true, 'fade');
    } else if (Platform.OS === 'ios') {
      // iOS 隐藏导航栏
      const UINavigationController = NativeModules.UINavigationController;
      UINavigationController?.setNavigationBarHidden(true, true);
    }
  }, []);

  return(
    <View style={styles.container}>
      <Text style={styles.headerText}>This is the header text</Text>
      <Text>Hello World</Text>
      <Text>Is this under? Yes it is</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

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