如何在React Native App中使用Switch组件？

Hi! Guys! It's Sunday and today we are going to talk about the default switch component in react-native.

嗨！ 伙计们！ 今天是星期日，今天我们将讨论react-native中的默认开关组件 。

As we all know from normal English, a switch provides a simple system to toggle ON/OFF.

众所周知，使用普通的英语，开关提供了一个简单的系统来切换开/关。

The image above is called a switch which we see on our android mobile phones.

上面的图片称为开关，我们在Android手机上看到了。

To add the picker component in your app is not complex but just to follow the rules and syntax.

在应用程序中添加选择器组件并不复杂，仅需遵循规则和语法即可。

Below is an example:

下面是一个示例：

In your App.js File, type the following,

在您的App.js文件中，键入以下内容，

import * as React from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';

export default class App extends React.Component {
  state = {  
        switchStatus: false  
    };  
  render() {
    return (
      <View style={styles.container}>
        <Text> Switch Example! </Text>
        <Text style={styles.textStyle}>{this.state.switchStatus ? 'on' :'off'}</Text>  
                <Switch  
                    value={this.state.switchStatus}  
                    onValueChange ={(switchStatus)=>this.setState({switchStatus})}/>  
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'skyblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Output

输出量

From the code above, the switch function is invoked using the switch self-closing tag. In this example, the switch component has the value and the valueChange attribute.
The value attribute is used to simply set the default value of the switch when the app is first opened while the valueChange attribute carries the event handler when the value of the switch is changed.

从上面的代码中，使用switch自动关闭标签调用switch功能。 在此示例中，开关组件具有value和valueChange属性。
首次打开应用程序时，value属性用于简单地设置开关的默认值，而在更改开关的值时，valueChange属性带有事件处理程序。

In this case, the event handler simply changes the state.

在这种情况下，事件处理程序仅更改状态。

Take note of the fact that the component was first of all imported before use.

请注意以下事实：该组件在使用前首先已导入。

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码！ 下次见。 随意发表评论或问题。 上帝祝福你！

翻译自: https://www.includehelp.com/react-js/how-to-use-the-switch-component-in-react-native-app.aspx