ReactNativeで進行状況バーを表示するにはどうすればよいですか?

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 'react-native-paper';

ProgressBar で利用可能ないくつかの重要なプロパティを示します。 -

#4#例: 進行状況バーの表示

Sr.No	プロパティと説明
1	進捗状況 値の範囲は0から10です。プログレスバーに表示される値。
2	Color 進行状況バーの色。
3	値が true/false であることがわかります。プログレスバーの表示/非表示に役立ちます。
	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で進行状況バーを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。