React Native - Cambiar

En este capítulo, explicaremos el Switch componente en un par de pasos.

Paso 1: crear archivo

Usaremos el HomeContainer componente para la lógica, pero necesitamos crear el componente de presentación.

Creemos ahora un nuevo archivo: SwitchExample.js.

Paso 2: Lógica

Estamos pasando valor desde el state y funciones para alternar elementos de interruptor SwitchExamplecomponente. Las funciones de alternancia se utilizarán para actualizar el estado.

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>
      );
   }
}

Paso 3: presentación

El componente de cambio requiere dos accesorios. losonValueChangeprop activará nuestras funciones de alternancia después de que un usuario presione el interruptor. losvalue prop está vinculado al estado de la HomeContainer componente.

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 presionamos el interruptor, el estado se actualizará. Puede verificar los valores en la consola.

Salida