我怎样才能用跟踪器和百分比制作进度条？

Question

我需要在设计中做一个这样的进度条，它会显示百分比，我是 React Native 的新手，我不知道如何开发它

Answer 1

你可以使用这个库 https://github.com/colbymillerdev/react-native-progress-steps/tree/master

工作示例：https://snack.expo.io/@msbot01/rude-scones

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { progress: 0};
  }

  onNextStep(count) {
    var percent = (count/5)*100;
    console.log(count+'::::::'+percent)
    this.setState({
      progress: percent
    })
  }

  onSubmit(){
    console.log('::::::')
  }

  render() {
    return (
      <View style={styles.container}>
        <ProgressSteps>
          <ProgressStep label="Ingreso" onNext={()=>{this.onNextStep(1)}}>
            <View style={{ alignItems: 'center' }}>
              <Text>step 1! {this.state.progress}%</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="T1" onNext={()=>{this.onNextStep(2)}}>
            <View style={{ alignItems: 'center' }}  >
              <Text>step 2! {this.state.progress}%</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="T2"  onNext={()=>{this.onNextStep(3)}}>
            <View style={{ alignItems: 'center' }}>
              <Text>step 3! {this.state.progress}%</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="T3"  onNext={()=>{this.onNextStep(4)}}>
            <View style={{ alignItems: 'center' }}>
              <Text>step 4! {this.state.progress}%</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Entrega"  onNext={()=>{this.onNextStep(5)}} onSubmit={()=>{this.onSubmit()}}>
            <View style={{ alignItems: 'center' }}> 
              <Text>5! {this.state.progress}%</Text> 
            </View>
          </ProgressStep>


        </ProgressSteps>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

我怎样才能用跟踪器和百分比制作进度条？

How can i make a progress bar with tracker and percent?

android

react-native

progress-bar

android-progressbar