要使用进度条组件,请使用 npm 安装react-native-paper 模块。
安装react-native-paper的命令是 -
npm install --save-dev react-native-paper
进度条的基本组成如下-
<progressbar progress={progress_number} color="progresscolorbar" />
要使用进度栏,您需要从react-native-paper导入它,如下所示 -
import { progressbar} from 'react-native-paper';
以下是 progressbar 上可用的一些重要属性 -
sr.否道具与说明
1 进度
取值范围为 0 到 10。要在进度条内显示的数值。
2 颜色
进度条的颜色。
3 可见
值为 true/false。它有助于显示/隐藏进度条。
4 style
应用于进度条的样式。
示例:显示进度条显示进度条非常简单。只需先从react-native-paper导入它即可。
import { progressbar} from 'react-native-paper';
显示进度条代码如下 -
<progressbar style={{ margintop:200}} progress={0.5} color="#00bcd4" />
默认值为 0.5,并且会递增到 10。
import * as react from 'react';import { progressbar} from 'react-native-paper';const mycomponent = () => ( <progressbar style={{ margintop:200}} progress={0.5} color="#00bcd4" />);export default mycomponent;
输出
以上就是如何在reactnative中显示进度条?的详细内容。