Компонент Switch
Компонент Switch рисует системный переключатель.
Положение задает параметр value.
При смене положения вызывают onValueChange.
Параметр disabled запрещает нажатие.
Синтаксис
<Switch value={on} onValueChange={setOn} />
Параметры
| Параметр | Описание |
|---|---|
value |
true - включено, false - выключено.
|
onValueChange |
Вызов при смене положения. На вход приходит новое булево значение. |
disabled |
При true переключатель не реагирует на касание.
|
Пример
Давайте свяжем переключатель с состоянием:
import { useState } from 'react';
import { View, Text, Switch } from 'react-native';
export default function App() {
const [on, setOn] = useState(true);
return (
<View>
<Text>{on ? 'abcde' : '12345'}</Text>
<Switch value={on} onValueChange={setOn} />
</View>
);
}
На экране подпись и переключатель.
Текст меняется между 'abcde' и '12345' при переключении.
Пример
Давайте отключим переключатель параметром disabled:
import { useState } from 'react';
import { Switch } from 'react-native';
export default function App() {
const [on, setOn] = useState(false);
return (
<Switch
value={on}
onValueChange={setOn}
disabled
/>
);
}
На экране переключатель в положении выкл и не меняется от касания.
