react native の switch に ios, android それぞれにそれらしくスタイルを当てる

facebook.github.io

他の component は tintcolor を設定すると ios, android 合わせて大体良い感じになるけどこれはならない。 ドキュメント通りではあるけれど名前が紛らわしい感がある。

まぁ、native の方でも tint color として多分当てられると思うけど（試してはいない）

ios

白系のデザインだったら on 状態の背景色だけ変えれば良いので onTintColor だけ指定する

android

グリップの色は on, off で変えたいので props.value を見て変える。

rn

なので上の例だと、 components/Switch.tsx とかに下のようなラッパーを書くと良い

import { Switch as RNSwitch, SwitchProps as RNSwitchProps, Platform } from 'react-native'

const SwitchIOS = (props: RNSwitchProps) =>
    <RNSwitch onTintColor="青" {...props} />

const SwitchAndroid = (props: RNSwitchProps) =>
    <RNSwitch onTintColor="薄い青" thumbTintColor={props.value ? "青" : "グレー" } tintColor="薄いグレー" {...props} />

export const Switch = Platform.select({ "ios": SwitchIOS, "android": SwitchAndroid })