如何使用当前状态工具提示创建进度条

Question

我正在尝试存档一些进度条，如下所示

它会有一个起点和一个终点，还有一个当前点，当前点将根据值显示，意思是，如果是155，则在红线的第一个，如果是180，例如, 将靠近红线右侧的边缘，或者如果它是 85，它将在绿线的第一条，所以困难的部分是如何使工具提示根据线上的数字显示

我的想法是使用图表库，在这种情况下是 victory chart 并基于它显示工具提示，但它比我想象的更难，而且图表比这个更高级

那么最好的方法是什么，或者是否有任何库可以像这样创建带有当前状态工具提示的这一行？非常感谢

Answer 1

工作示例： https://snack.expo.dev/@msbot01/tenacious-watermelon

代码：

import React,{useState, useEffect, useRef} from 'react';
import { Text, View, StyleSheet,Dimensions,Image,Picker  } from 'react-native';
import Constants from 'expo-constants';

// 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 function App() {
const windowWidth = Dimensions.get('window').width-100;
const windowHeight = Dimensions.get('window').height;

const [position, setPosition] = useState(0);
const [points, setPoints] = useState(0);

useEffect(()=>{
    // checkCameraPermission();
    setPointerPostion()

  })

  const setPointerPostion=()=>{
    var eachPoint = windowWidth/200;
    console.log(eachPoint)
    setPosition(eachPoint*points)
  }

  return (
    <View style={{justifyContent:'center',flex:1, padding:50}}>
      <View style={{height:100, width:windowWidth, justifyContent:'center'}}>
        <View style={{flexDirection:'row', alignItems:'center', width:'100%'}}>
          <View style={{height:3, width:windowWidth/3, backgroundColor:'green'}}></View>
          <View style={{height:3, width:windowWidth/3, backgroundColor:'yellow'}}></View>
          <View style={{height:3, width:windowWidth/3, backgroundColor:'blue'}}></View>
        </View>

        <View style={{height:50,width:50, position:'absolute', top:0, left:position-20}}>
          <Image
              style={{height:50, width:50}}
              source={require('./chat.png')}
            />
            <Text style={{position:'absolute',top:10, bottom:0, left:0, textAlign:'center', height:30, width:50, fontWeight:'bold'}}>{points}</Text>
        </View>
      </View>

      <View style={{}}>
      <Picker
        selectedValue={points}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setPoints(Number(itemValue,[setPointerPostion()]))}
      >
        <Picker.Item label="10" value="10" />
        <Picker.Item label="20" value="20" />
        <Picker.Item label="30" value="3" />
        <Picker.Item label="40" value="40" />
        <Picker.Item label="80" value="80" />
        <Picker.Item label="100" value="100" />
        <Picker.Item label="150" value="150" />
        <Picker.Item label="200" value="200" />
      </Picker>
    </View>

    </View>
  );
}

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

如何使用当前状态工具提示创建进度条

How to create a progress bar with current state tooltip

javascript

reactjs

react-native

victory-charts