"/> ">

首頁  >  文章  >  web前端  >  如何在ReactNative中顯示進度條?

如何在ReactNative中顯示進度條?

WBOY
WBOY轉載
2023-09-10 20:37:011160瀏覽

ProgressBar 是一種告訴使用者內容將在某個時候可用的方式。當您向伺服器提交內容並等待伺服器回應時,最好使用它。

要使用進度條元件,請使用 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 &#39;react-native-paper&#39;;

以下是ProgressBar 上可用的一些重要屬性-

##Sr.否1進度2顏色3可見4 style範例:顯示進度條
##道具與說明
取值範圍為0 到10。要在進度條內顯示的數值。

進度條的顏色。

#值為 true/false。它有助於顯示/隱藏進度條。

套用於進度條的樣式。

顯示進度列非常簡單。只需先從react-native-paper導入它即可。

import { ProgressBar} from &#39;react-native-paper&#39;;

顯示進度條程式碼如下 -

<ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />

預設值為 0.5,並且會遞增到 10。

import * as React from 'react';
import { ProgressBar} from &#39;react-native-paper&#39;;
const MyComponent = () => (
   <ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />
);
export default MyComponent;

輸出

#

以上是如何在ReactNative中顯示進度條?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除