0
163
ViewsCómo crear una barra de progreso con información sobre herramientas de estado actual
Estoy tratando de archivar una línea de progreso como esta
Tendrá un punto de inicio y un punto final, junto con un punto actual, el punto actual se mostrará en función del valor, es decir, si era 155, estaría al principio de la línea roja, si 180, por ejemplo, estaría cerca del borde a la derecha de la línea roja, o si era 85, estará en la primera línea verde, por lo que la parte difícil es cómo hacer que la información sobre herramientas se muestre en función del número en la línea
Mi idea es usar una biblioteca de gráficos, en este caso es un victory chart y muestra información sobre herramientas basada en eso, pero se ve más difícil de lo que creo y el gráfico es más avanzado que esto.
Entonces, ¿cuál es la mejor manera o hay alguna biblioteca para crear esta línea con información sobre herramientas de estado actual como esta? Muchas gracias
1 answers
Answer question0
Ejemplo de trabajo: https://snack.expo.dev/@msbot01/tenacious-watermelon
código:
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, } });