1. 程式人生 > >react native 修改安卓Switch顏色樣式

react native 修改安卓Switch顏色樣式

      最近在使用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!