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

React native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

方法：在本文中，我们将使用材料设计创建一个进度条。我们将使用 react-native-paper 库来显示进度条。进度条充当状态指示器。在我们的项目中，我们将在其顶部和下方显示一个进度条，将有输入字段来捕获用户输入的数据。当用户填写数据时，进度条会自动更新。我们将逐步了解该方法。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：在您的项目中创建一个组件文件夹。在 components 文件夹中创建一个文件 ProgressBar.js

项目结构：看起来像这样

第 4 步：在 ProgressBar.js 中，我们从react-native-paper库中导入了 ProgressBar、TextInput 和 Colors。我们将使用 useState 并使用效果挂钩来更新组件的状态。 ProgressBar 组件使用道具进度。进度 prop 可以取 0 到 1 范围内的任何值。

ProgressBar.js

import React , {useState, useEffect} from "react";
import {Text , View, StyleSheet} from 'react-native';
import { ProgressBar, Colors , TextInput} from "react-native-paper";
  
const ProgressBarExample = () => {
  
    const [status, setStatus] = useState() ;
    const [progressColor , setProgessColor] = useState(Colors.red400)
    const [name , setName] = useState('');
    const [age , setAge] = useState('');
    const [occ, setOcc] = useState('');
    const [location , setLocation] = useState('');
  
    useEffect(() => {
        if(status === 1)
          setProgessColor(Colors.green500)
    })
  
    return(
      
          Progress Bar
          
  
          
              Fill the details below
          
  
          
               {
                         setName(text) ;
              }} onEndEditing ={() => setStatus(0.25)}/>
              {
                         setAge(age);
              }} onEndEditing ={() => setStatus(0.5)}/>
              {
                         setOcc(occupation);
              }} onEndEditing ={() => setStatus(0.75)}/>
              {
                         setLocation(loc);          
              }} onEndEditing ={() => setStatus(1)}/>
          
      
  
    )
}
  
export default ProgressBarExample ;
  
const styles = StyleSheet.create({
    container :{
        padding: 20
    },
    text :{
       marginTop:30
    },
    textInput:{
        marginTop : 60
    }
})

第 5 步：现在将此文件导入您的 App.js

应用程序.js

import React from 'react';
import type {Node} from 'react';
import {View} from 'react-native';
import ProgressBarExample from './components/ProgressBar';
  
const App: () => Node = () => {
  return (    
               
          
           
  );
};
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：