React Native学习之ProgressBar组件

分平台的:ProgressBarAndroidProgressViewIOS

ProgressBar组件的属性:

  • styleAttr:进度条的样式,Horizontal Small Large Inverse SmallInverse LargeInverse
  • progress:当前的进度值(在0到1之间)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

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

class RNAPP extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={[styles.flex, {marginTop:45}]}>
                <Text>ProgressBar组件</Text>

                <ProgressBarAndroid styleAttr="Horizontal" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
    },
});

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

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/02/25/react-native-learning-progressbar-component/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
React Native学习之ProgressBar组件
分平台的:ProgressBarAndroid、ProgressViewIOS ProgressBar组件的属性: styleAttr:进度条的样式,Horizontal Small Large Inverse SmallInverse LargeInv……
<<上一篇
下一篇>>
文章目录
关闭
目 录