我有一个名为riskIndex的变量，它可以从（0-8）。我想用进度条来显示这个变量的值。我已经有了一个进度条的代码，我不确定如何将上面提到的变量连接到代码。互联网上现有的解决方案似乎实现了一个动画进度条，我不确定我是否应该使用它，因为我使用的变量不会更新它的值。2它在每次运行时都有一个固定的值。3例如，在这个例子中，我将它的值取为4。
我想在进度条上将值4显示为进度。
进度条的代码如下所示

import * as React from 'react';
import { Animated,Text, View, StyleSheet } from 'react-native';
import { useEffect, useState } from "react"
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}>Amateur</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',
    // paddingTop: Constants.statusBarHeight,
    backgroundColor: '#132542',
    padding: 8,
    
  },

  progressLabels: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
    marginBottom: 10,
    
  },
  progressLabel: {
    fontSize: 12,
    fontWeight: 'bold',
    //fontFamily: "sans-serif",
    width: "19%",
    textAlign: "center",
    color:'white',
    flexWrap:'wrap'
  },

  progressContainer: {
    position: "relative",
    height: 100
  },
  progress: {
    marginLeft: "5%",
    marginTop: 5,
    width: "90%",
    height: 30,
    // backgroundColor: "rgb(7, 14, 60)",
    borderRadius: 15
  },

  milestonesContainer: {
    marginLeft: "5%",
    position: "absolute",
    width: "100%",
    display: "flex",
    flexDirection: "row"
  },
  milestone: {
    height: 40,
    width: "30%",
    //backgroundColor: "white",
    borderColor: "rgb(7, 11, 55)",
    borderLeftWidth: 1,
    borderRightWidth: 1,
  }
});

此代码的输出类似于x1c 0d1x