如何在 ReactNative 中显示进度条?

react nativejavascriptmobile development

进度条是一种告诉用户内容将在某个时间可用的方法。当您向服务器提交某些内容并等待服务器响应时,它最有用。

要使用进度条组件,请使用 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.NoProps &描述
1进度
取值范围为 0 至 10。要在进度条内显示的数值。
2颜色
进度条的颜色。
3可见
值为 true/false。它有助于显示/隐藏进度条。
4style
要应用于进度条的样式。

示例:进度条的显示

显示进度条非常简单。只需先从 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;

输出


相关文章