如何在React Native进度条上展示固定整数riskIndex值

需求说明 #

存在一个取值范围为0-8的固定变量riskIndex（每次运行时值固定，无动态更新），需将其与现有React Native进度条关联，静态展示对应进度，无需动画效果。

现有代码 #

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function Progressbar() {
  let riskIndex = 6; // 示例值，可替换为实际变量
  
  return (
    <View style={styles.container}>
      <View style={styles.progressLabels}>
        <Text style={styles.progressLabel}>Low</Text>
        <View style={styles.progressLabel}></View>
        <Text style={styles.progressLabel}>Moderate</Text>
        <View style={styles.progressLabel}></View>
        <Text style={styles.progressLabel}>High</Text>
      </View>
      <View style={styles.progressContainer}>
        <LinearGradient colors={["rgb(15, 25, 75)", "rgb(90, 95, 160)"]} style={styles.progress}/>
        <View style={styles.milestonesContainer}>
          <View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#132542',
    padding: 8,
  },
  progressLabels: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
    marginBottom: 10,
  },
  progressLabel: {
    fontSize: 12,
    fontWeight: 'bold',
    width: "19%",
    textAlign: "center",
    color:'white',
    flexWrap:'wrap'
  },
  progressContainer: {
    position: "relative",
    height: 100
  },
  progress: {
    marginLeft: "5%",
    marginTop: 5,
    width: "90%",
    height: 30,
    borderRadius: 15
  },
  milestonesContainer: {
    marginLeft: "5%",
    position: "absolute",
    width: "100%",
    display: "flex",
    flexDirection: "row"
  },
  milestone: {
    height: 40,
    width: "30%",
    borderColor: "rgb(7, 11, 55)",
    borderLeftWidth: 1,
    borderRightWidth: 1,
  }
});

当前效果 #

解决方案 #

核心思路 #

通过计算riskIndex在0-8区间内的占比，动态设置进度条的宽度：

1. 进度条的可用宽度为容器的90%（对应原样式的布局规则）
2. 动态宽度计算公式：(riskIndex / 8) * 90%，确保值在0%-90%之间，匹配容器的可用空间

修改后的完整代码 #

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function Progressbar() {
  let riskIndex = 4; // 示例值，替换为实际变量
  
  // 计算动态进度宽度：基于riskIndex的0-8区间，映射到进度条的0%-90%宽度
  const progressWidth = `${(riskIndex / 8) * 90}%`;
  
  return (
    <View style={styles.container}>
      <View style={styles.progressLabels}>
        <Text style={styles.progressLabel}>Low</Text>
        <View style={styles.progressLabel}></View>
        <Text style={styles.progressLabel}>Moderate</Text>
        <View style={styles.progressLabel}></View>
        <Text style={styles.progressLabel}>High</Text>
      </View>
      <View style={styles.progressContainer}>
        {/* 使用数组合并静态样式与动态样式 */}
        <LinearGradient 
          colors={["rgb(15, 25, 75)", "rgb(90, 95, 160)"]} 
          style={[styles.progress, { width: progressWidth }]}
        />
        <View style={styles.milestonesContainer}>
          <View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#132542',
    padding: 8,
  },
  progressLabels: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
    marginBottom: 10,
  },
  progressLabel: {
    fontSize: 12,
    fontWeight: 'bold',
    width: "19%",
    textAlign: "center",
    color:'white',
    flexWrap:'wrap'
  },
  progressContainer: {
    position: "relative",
    height: 100
  },
  progress: {
    marginLeft: "5%",
    marginTop: 5,
    height: 30,
    borderRadius: 15
  },
  milestonesContainer: {
    marginLeft: "5%",
    position: "absolute",
    width: "100%",
    display: "flex",
    flexDirection: "row"
  },
  milestone: {
    height: 40,
    width: "30%",
    borderColor: "rgb(7, 11, 55)",
    borderLeftWidth: 1,
    borderRightWidth: 1,
  }
});

修改说明 #

1. 移除原代码中未使用的Animated、useEffect、useState导入，精简代码
2. 添加progressWidth变量，动态计算进度条宽度
3. 将LinearGradient的style改为数组形式，合并静态样式与动态宽度
4. 移除原progress样式中的固定width: "90%"，改为动态设置

内容的提问来源于stack exchange，提问作者Muhammad Aqeel