React Native新手求助：如何修改iPhone 10及以上机型底部白色线条的颜色？

嘿，作为RN新手碰到这个问题太正常啦！我刚帮几个朋友处理过类似需求，给你几个实用的方案参考：

方案一：利用React Native官方SafeAreaView自适应（最推荐） #

Home Indicator的颜色其实是iOS系统根据底部区域的背景色自动调整的——深色背景会显示白色指示器，浅色背景则显示深色。所以最简单的方式就是给页面底部的安全区设置和页面主体一致的背景色，让系统自动适配：

import { SafeAreaView, StyleSheet, View, Text } from 'react-native';

export default function YourScreen() {
  return (
    <SafeAreaView style={styles.container}>
      {/* 你的页面内容 */}
      <View style={styles.content}>
        <Text>这是你的页面内容</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#121212', // 设置成你想要的底部背景色，比如深色
  },
  content: {
    flex: 1,
    // 内容区域的样式可以单独设置，不影响底部安全区的背景
  },
});

方案二：用react-native-safe-area-context更灵活控制 #

如果你需要更精细化的安全区管理，推荐用这个第三方库（比官方SafeAreaView功能更强）：

首先安装库：

npm install react-native-safe-area-context
# 或者 yarn add react-native-safe-area-context

然后在代码中使用：

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
        {/* 你的整个应用内容 */}
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

方案三：iOS原生代码调整（不推荐强制修改） #

苹果官方其实不建议强制修改Home Indicator的颜色，因为这不符合系统设计规范，可能影响App Store审核。但如果确实有特殊需求，可以在iOS项目中修改：

打开ios/[你的项目名]/AppDelegate.swift，添加以下代码：

import UIKit
import React

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // 原有代码...
    
    // 设置全局视图背景色，让指示器自动适配
    if let rootViewController = window?.rootViewController {
      rootViewController.view.backgroundColor = .black
    }
    
    return true
  }

  // 可选：控制指示器是否自动隐藏
  override var preferredHomeIndicatorAutoHidden: Bool {
    return false
  }
}

小提示 #

优先用方案一或方案二，让系统自动适配颜色，这样既符合iOS设计规范，也不用额外折腾原生代码～

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