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

  复制

  如果我们按下开关，状态将被更新。您可以在控制台中检查值。

  输出