基础篇章:关于 React Native 之 Switch 和 ProgressBarAndroid 组件的讲解

综合 来源:smart_android 146℃ 0评论

 

 

今天我们来讲两个比较简单的组件的使用方法,分别是 Switch 和 ProgressBarAndroid 组件,由于非常简单,所以这两个控件的讲解就直接用一篇文章就够了。

Switch组件

今天我们来讲Switch组件,什么是Switch组件呢?我感觉大家都是做过移动开发的,应该知道是做什么用的。顾名思义:开关,控制组件。在使用它时,我们必须使用onValueChange回调来更新value属性以响应用户的动作。如果不更新value属性,组件只会按一开始给定的value值来渲染且保持不变,看上去就像完全不动。

Switch组件属性

  • disabled bool 如果是true,组件将不动,不进行交互,默认是false

  • onValueChange function 当值改变的时候回调此函数,参数是新的值

  • value bool 开关的值,如果是true表示开关打开,默认false

  • onTintColor color ios 当开关打开后的背景色

  • thumbTintColor color ios 开关上圆形按钮的背景颜色

  • tintColor color 关闭状态时边框颜色

代码实例

效果图

先看一个简单的效果图,就是这么简单,代码其实更简单。

代码

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 Switch,
 View
} from 'react-native';

export default class SwitchDemo extends Component {
 state = {
   colorTrueSwitchIsOn: true,
   colorFalseSwitchIsOn: false,
 };
 render() {
   return (
     <View style={styles.container}>
       <Switch
         onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
         style={{marginBottom: 10}}
         value={this.state.colorFalseSwitchIsOn} />
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

AppRegistry.registerComponent('SwitchDemo', () => SwitchDemo);

ProgressBarAndroid组件

ProgressBar顾名思义就是进度条,而ProgressBarAndroid就是封装了Android平台上的ProgressBar的React组件。它的作用和功能就不用我说了吧?就是展示正在加载或者一些动作正在进行中。直接进入正题。

ProgressBarAndroid组件属性

  • color string 进度条颜色

  • indeterminate indeterminateType 设置进度条是否显示确定进度。注意这个在styleAttr是Horizontal的时候必须是false

  • progress number 进度值,在0到1之间

  • styleAttr ReactPropTypes.oneOf(STYLE_ATTRIBUTES) 进度条框的风格,它有如下几个值:

    • Small

    • Horizontal

    • Normal (default)

    • Large

    • Inverse

    • SmallInverse

    • LargeInverse

代码实例

效果图

来,我们看看效果图,如下:

代码

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 ProgressBarAndroid,
 View
} from 'react-native';

export default class ProgressBarAndroidDemo extends Component {
 render() {
   return (
     <View style={styles.container}>
      <ProgressBarAndroid  color="red" styleAttr='Horizontal'
           indeterminate={true}/>
       <ProgressBarAndroid  color="red" styleAttr='Horizontal' progress={0.6}
           indeterminate={false} style={{marginTop:15}}/>
       <ProgressBarAndroid  color="black" styleAttr='SmallInverse'
           style={{marginTop:15}}/>
       <ProgressBarAndroid  color="blue" styleAttr='Inverse'style={{marginTop:15}}/>
       <ProgressBarAndroid  styleAttr='LargeInverse'
           style={{marginTop:15}}/>
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

AppRegistry.registerComponent('ProgressBarAndroidDemo', () => ProgressBarAndroidDemo);

特别说明

看到特别说明的时候,我要告诉你们,最新版本的react不再支持ProgressBarAndroid了,它已经被ActivityIndicator组件取代了,ProgressBarAndroid被抛弃了。学完了,我才告诉你们,你们不会打我吧,哈哈……我之所以讲,是因为让你们知道的更多一点,之后在看到别人用时,知道以前可以这么用。我们下节就讲ActivityIndicator组件。

 

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案