React Native Android深色模式下如何修改ScrollView滚动条颜色？

有几种直接可行的方案解决这个问题，具体实现如下：

方法一：JS层动态设置（无需修改原生代码） #

React Native的ScrollView组件自带scrollIndicatorStyle属性，结合系统颜色模式判断就能动态切换滚动条颜色。

首先通过useColorScheme钩子获取当前系统的颜色模式，再根据模式设置对应颜色：

import { ScrollView, useColorScheme } from 'react-native';

function CustomScrollView() {
  const colorScheme = useColorScheme();
  // 自定义深色/浅色模式下的滚动条颜色
  const scrollBarColor = colorScheme === 'dark' ? '#2D2D2D' : '#8E8E93';

  return (
    <ScrollView
      scrollIndicatorStyle={{ backgroundColor: scrollBarColor }}
    >
      {/* 滚动内容区域 */}
    </ScrollView>
  );
}

这种方式轻量灵活，适合单个或部分ScrollView的自定义需求，FlatList、SectionList这类继承自ScrollView的组件也能直接复用该逻辑。

方法二：Android原生主题全局配置 #

如果希望所有滚动组件的滚动条颜色都跟随系统模式统一变化，可以修改Android原生主题文件：

1. 在android/app/src/main/res/values/styles.xml中配置浅色模式的滚动条样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 其他主题配置 -->
    <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_light</item>
</style>

2. 创建android/app/src/main/res/values-night/styles.xml（不存在则新建），配置深色模式的滚动条样式：

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- 其他主题配置 -->
    <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_dark</item>
</style>

3. 在drawable目录下创建对应的滚动条形状文件，比如scrollbar_thumb_light.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#8E8E93" />
    <corners android:radius="4dp" />
</shape>

同理创建scrollbar_thumb_dark.xml设置深色模式的颜色即可，这种方式会全局生效。

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