React Native - Commutateur
Dans ce chapitre, nous expliquerons les Switch composant en quelques étapes.
Étape 1: créer un fichier
Nous utiliserons le HomeContainer composant pour la logique, mais nous devons créer le composant de présentation.
Créons maintenant un nouveau fichier: SwitchExample.js.
Étape 2: logique
Nous transmettons de la valeur à state et des fonctions pour basculer les éléments sur SwitchExamplecomposant. Les fonctions de bascule seront utilisées pour mettre à jour l'état.
App.js
import React, { Component } from 'react'
import { View } from 'react-native'
import SwitchExample from './switch_example.js'
export default class HomeContainer extends Component {
constructor() {
super();
this.state = {
switch1Value: false,
}
}
toggleSwitch1 = (value) => {
this.setState({switch1Value: value})
console.log('Switch 1 is: ' + value)
}
render() {
return (
<View>
<SwitchExample
toggleSwitch1 = {this.toggleSwitch1}
switch1Value = {this.state.switch1Value}/>
</View>
);
}
}
Étape 3: Présentation
Le composant Switch prend deux accessoires. leonValueChangeprop déclenchera nos fonctions de bascule après qu'un utilisateur appuie sur le commutateur. levalue prop est lié à l'état du HomeContainer composant.
switch_example.js
import React, { Component } from 'react'
import { View, Switch, StyleSheet }
from 'react-native'
export default SwitchExample = (props) => {
return (
<View style = {styles.container}>
<Switch
onValueChange = {props.toggleSwitch1}
value = {props.switch1Value}/>
</View>
)
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 100
}
})
Si nous appuyons sur l'interrupteur, l'état sera mis à jour. Vous pouvez vérifier les valeurs dans la console.
Production
![](https://assets.edu.lat/react_native/images/react_native_switch.jpg)