React Native Switch组件 – React Native实战教程 _ReactNative实战教程

【React Native Switch组件 – React Native实战教程】上一章React Native实战教程请查看：React Native状态栏Status Bar
在本章中，我们将通过几个步骤来解释Switch组件。
步骤1：创建文件我们将使用HomeContainer组件用于逻辑，但是我们需要创建表示组件。
现在让我们创建一个新文件：SwitchExample.js。
步骤2：逻辑我们将值从状态和用于切换开关项的函数传递给SwitchExample组件，Toggle函数将用于更新状态。
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=http://www.srcmini.com/{this.state.switch1Value} /> < /View> ); } }

步骤3：表示Switch组件有两个prop，onValueChange将在用户按下开关后触发我们的切换功能，值prop绑定到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 = http://www.srcmini.com/{props.switch1Value}/> < /View> ) } const styles = StyleSheet.create ({ container: { flex: 1, alignItems: 'center', marginTop: 100 } })

如果我们按下开关按钮，状态就会更新，你可以在控制台中检查值。
输出