react native 修改安卓Switch颜色样式

最新推荐文章于 2025-06-13 09:46:28 发布

原创最新推荐文章于 2025-06-13 09:46:28 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

7 篇文章

订阅专栏

在使用React Native的Switch组件时，发现颜色属性仅适用于iOS。通过查看源码，了解到在安卓上Switch对应的是SwitchCompat。为改变颜色，需要在布局加载前设置Theme。添加自定义样式并在setContentView前调用setTheme方法，即可实现颜色更改。将ReactRootView添加到指定布局后，调整颜色生效。

最近在使用Switch控件的时候。官方文档是这样的

<Switch
          value={(this.state && this.state.switchValue) || false}
          onValueChange={(value) => {
            this.setState({switchValue: value})
          }}
          // Color props are iOS-only
          // thumbTintColor={'white'} // Removes shadow

        />

重要的是其中的 Color props are iOS-only.. 就这尴尬了。

费了几分钟看了源码，发现Switch是封装的原生组件，安卓里对应的是SwitchCompat控件。所以，要修改颜色，最简单的就是添加Theme.

首先添加style

    <style name="Color1SwitchStyle">
        <item name="colorControlActivated">@color/white</item>
        <!-- Inactive thumb color switch关闭时的拇指按钮的颜色 -->
        <item name="colorSwitchThumbNormal">@color/tink_color</item>
        <!-- Inactive track color(30% transparency) switch关闭时的轨迹的颜色  30%这个颜色 -->
        <item name="android:colorForeground">@color/tink_color</item>

    </style>

然后在setContentView之前setTheme就ok了。

   setTheme(R.style.Color1SwitchStyle);
   setContentView(R.layout.activity_apps_detail_for_react);

这里我是将ReactRootView直接添加到activity_apps_detail_for_react这个布局中的。

然后It work!