React Native实现升级等级进度条-代码示例

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
export default class UpgradeProgressBar extends React.Component {
  render() {
    const { progress } = this.props;
    const progressWidth = progress * 240 / 100; // 假设整个进度条宽度为240
 
    return (
      <View style={styles.container}>
        <View style={styles.progressBar}>
          <View style={[styles.progress, { width: progressWidth }]} />
        </View>
        <Text style={styles.text}>{progress}%</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressBar: {
    width: 240,
    height: 6,
    backgroundColor: '#e5e5e5',
    borderRadius: 3,
    overflow: 'hidden',
  },
  progress: {
    width: 0,
    height: '100%',
    backgroundColor: '#4caf50',
  },
  text: {
    marginLeft: 16,
    color: '#4caf50',
    fontSize: 16,
  },
});

这段代码展示了如何在React Native应用中创建一个简单的升级进度条组件。它接收一个progress属性，该属性是一个介于0到100的数字，用于表示升级的进度。组件会根据这个进度值计算进度条应有的宽度，并渲染出相应的UI。