React Native - Switch

  • 简述

    在本章中,我们将解释Switch几个步骤中的组件。
  • 第 1 步:创建文件

    我们将使用HomeContainer逻辑组件,但我们需要创建表示组件。
    现在让我们创建一个新文件:SwitchExample.js.
  • 第 2 步:逻辑

    我们从state和用于切换开关项目的功能SwitchExample零件。切换功能将用于更新状态。

    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>
          );
       }
    }
    
  • 第 3 步:演示

    Switch 组件需要两个道具。这onValueChangeprop 将在用户按下开关后触发我们的切换功能。这valueprop 绑定到的状态HomeContainer零件。

    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
       }
    })
    
    如果我们按下开关,状态将被更新。您可以在控制台中检查值。

    输出

    反应本机开关