如何使用 react-native-paper 库在 react-native 中添加进度条？

React Native Paper 是一个由社区驱动的 React Native UI 组件库。它提供了许多美观且易于定制的组件，其中包括进度条。在本文中，我们将学习如何使用 React Native Paper 库在 React Native 中添加进度条。

步骤

步骤 1：安装 React Native Paper

在终端窗口中导航到项目文件夹，然后运行以下命令，以使用 npm 安装 React Native Paper。

npm install react-native-paper

或者，您可以使用 yarn 安装它，如下所示。

yarn add react-native-paper

步骤 2：导入组件

现在，我们需要导入 ProgressBar 组件。在项目中的要使用的文件中，导入以下代码。

import { ProgressBar } from 'react-native-paper';

步骤 3：添加进度条

现在，您可以通过以下方式添加一个进度条。

<ProgressBar progress={0.5} color={'red'} />

在上面的代码中，我们设置了 progress 属性为 0.5，这意味着进度条将显示到一半。我们还设置了 color 属性为 'red'，这将使进度条显示为红色。

步骤 4：自定义进度条

您可以根据需要自定义进度条的样式。以下是一些可用于自定义进度条的属性的列表。

• progress：进度条的完成度。它是一个小数，它的值在 0 到 1 之间。
• color：进度条的颜色。
• animating：一个布尔值，表示进度条是否应该以动画形式显示完成度。
• indeterminate：一个布尔值，表示进度条是否应该以不确定的方式显示完成度。
• visible：一个布尔值，表示进度条是否应该显示。
• style：一个对象，用于自定义进度条的样式。

以下代码演示了如何使用上述属性自定义进度条的样式。

<ProgressBar
  progress={0.5}
  color={'red'}
  indeterminate={true}
  visible={true}
  style={{
    borderRadius: 20,
    borderWidth: 1,
    height: 10,
    width: '80%',
    marginTop: 20,
  }}
/>

在上面的代码中，我们设置了以下属性。

• progress：进度条的完成度为 0.5。
• color：进度条的颜色为红色。
• indeterminate：进度条应该以不确定的方式显示完成度，这意味着进度条会不停地滚动。
• visible：进度条应该显示。
• style：我们使用样式对象自定义进度条的样式。我们将进度条的圆角设置为 20，边框宽度为 1，高度为 10，宽度为 80%，并将其与上面的元素分隔开。

结论

React Native Paper 是一种方便和易于使用的 UI 组件库，可以轻松地在 React Native 中添加进度条。使用上述步骤，您可以轻松地使用该库在应用程序中添加进度条，并自定义它们的样式以适合您的需求。