ProgressBar 是一種告訴用戶內(nèi)容將在某個(gè)時(shí)候可用的方式。當(dāng)您向服務(wù)器提交內(nèi)容并等待服務(wù)器響應(yīng)時(shí)，最好使用它。
要使用進(jìn)度條組件，請(qǐng)使用 npm 安裝react-native-paper 模塊。
安裝react-native-paper的命令是 –
npm install --save-dev react-native-paper
登錄后復(fù)制
進(jìn)度條的基本組成如下-
<ProgressBar progress={progress_number} color="progresscolorbar" />
登錄后復(fù)制
要使用進(jìn)度欄，您需要從react-native-paper導(dǎo)入它，如下所示 –
import { ProgressBar} from 'react-native-paper';
登錄后復(fù)制登錄后復(fù)制
以下是 ProgressBar 上可用的一些重要屬性 –
| Sr.否 | 道具與說明 |
|---|---|
| 1 | 進(jìn)度
取值范圍為 0 到 10。要在進(jìn)度條內(nèi)顯示的數(shù)值。 |
| 2 | 顏色
進(jìn)度條的顏色。 |
| 3 | 可見
值為 true/false。它有助于顯示/隱藏進(jìn)度條。 |
| 4 | style
應(yīng)用于進(jìn)度條的樣式。 |
示例：顯示進(jìn)度條
顯示進(jìn)度條非常簡(jiǎn)單。只需先從react-native-paper導(dǎo)入它即可。
import { ProgressBar} from 'react-native-paper';
登錄后復(fù)制登錄后復(fù)制
顯示進(jìn)度條代碼如下 –
<ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />
登錄后復(fù)制
默認(rèn)值為 0.5，并且會(huì)遞增到 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;
登錄后復(fù)制
輸出
以上就是如何在ReactNative中顯示進(jìn)度條？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
