mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
87a4f56a89
'Switch' on Web can support custom sizes and colors. To do so, Web-specific propTypes are introduced: `trackColor`, `thumbColor`, `activeTrackColor`, and `activeThumbColor`.
77 lines
1.9 KiB
Markdown
77 lines
1.9 KiB
Markdown
# Switch
|
|
|
|
This is a controlled component that requires an `onValueChange` callback that
|
|
updates the value prop in order for the component to reflect user actions. If
|
|
the `value` prop is not updated, the component will continue to render the
|
|
supplied `value` prop instead of the expected result of any user actions.
|
|
|
|
## Props
|
|
|
|
[...View props](./View.md)
|
|
|
|
**disabled**: bool = false
|
|
|
|
If `true` the user won't be able to interact with the switch.
|
|
|
|
**onValueChange**: func
|
|
|
|
Invoked with the new value when the value changes.
|
|
|
|
**value**: bool = false
|
|
|
|
The value of the switch. If `true` the switch will be turned on.
|
|
|
|
(web) **activeThumbColor**: color = #009688
|
|
|
|
The color of the thumb grip when the switch is turned on.
|
|
|
|
(web) **activeTrackColor**: color = #A3D3CF
|
|
|
|
The color of the track when the switch is turned on.
|
|
|
|
(web) **thumbColor**: color = #FAFAFA
|
|
|
|
The color of the thumb grip when the switch is turned off.
|
|
|
|
(web) **trackColor**: color = #939393
|
|
|
|
The color of the track when the switch is turned off.
|
|
|
|
## Examples
|
|
|
|
```js
|
|
import React, { Component } from 'react'
|
|
import { Switch, View } from 'react-native'
|
|
|
|
class ColorSwitchExample extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
colorTrueSwitchIsOn: true,
|
|
colorFalseSwitchIsOn: false
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View>
|
|
<Switch
|
|
activeThumbColor='#428BCA'
|
|
activeTrackColor='#A0C4E3'
|
|
onValueChange={(value) => this.setState({ colorFalseSwitchIsOn: value })}
|
|
value={this.state.colorFalseSwitchIsOn}
|
|
/>
|
|
<Switch
|
|
activeThumbColor='#5CB85C'
|
|
activeTrackColor='#ADDAAD'
|
|
onValueChange={(value) => this.setState({ colorTrueSwitchIsOn: value })}
|
|
thumbColor='#EBA9A7'
|
|
trackColor='#D9534F'
|
|
value={this.state.colorTrueSwitchIsOn}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
```
|