ReactNativeでProgressBarを表示するにはどうすればよいですか？

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で利用できる重要なプロパティの一部です-

例：プログレスバーの表示

プログレスバーを表示するのは非常に簡単です。最初に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;

出力