我想解析
我只想要整数值而不是小数值。
我尝试使用:
<Animated.Text>{Number.parseInt(milliliters.ml)}</Animated.Text>
但是我收到错误,它不起作用。
我在线运行的示例:
https://snack.expo.dev/@danilobatistaqueiroz/parsing_animated_values
如果有其他此类动画的库,对于我的情况就足够了。
我的代码:
import { Animated, Easing } from 'react-native';
import React from 'react';
export default function Milliliters() {
const ML_LEVELS = [240,50,190];
this.ml = React.useRef(new Animated.Value(ML_LEVELS[0])).current;
this.ml_up_down = ()=>{
Animated.sequence([
Animated.timing(this.ml, {
duration: 2000,
toValue: ML_LEVELS[1],
easing: Easing.bezier(.55,.5,.45,.5),
useNativeDriver: false,
delay: 0,
}),
Animated.timing(this.ml, {
duration: 2000,
toValue: ML_LEVELS[2],
easing: Easing.ease,
useNativeDriver: false,
delay: 0,
}),
]).start();
}
}
import Milliliters from './milliliters';
import React from 'react';
import { Animated, Text } from 'react-native';
export default AddDrink = () => {
const milliliters = React.useRef(new Milliliters()).current;
React.useEffect(() => {
milliliters.ml_up_down();
});
return (
<Animated.Text>{milliliters.ml}</Animated.Text>
);
}
import React, { useRef, useState, useEffect } from "react";
import { Animated, Easing, Text, View } from "react-native";
export default function AddDrink() {
const ML_LEVELS = [240, 50, 190];
const ml = useRef(new Animated.Value(ML_LEVELS[0])).current;
const [displayValue, setDisplayValue] = useState(ML_LEVELS[0]);
useEffect(() => {
// Update value of `displayValue` when `ml` changes
const id = ml.addListener(({ value }) => {
setDisplayValue(Math.round(value)); // Round the value to integer
});
return () => {
ml.removeListener(id);
};
}, [ml]);
const ml_up_down = () => {
Animated.sequence([
Animated.timing(ml, {
duration: 2000,
toValue: ML_LEVELS[1],
easing: Easing.bezier(0.55, 0.5, 0.45, 0.5),
useNativeDriver: false,
}),
Animated.timing(ml, {
duration: 2000,
toValue: ML_LEVELS[2],
easing: Easing.ease,
useNativeDriver: false,
}),
]).start();
};
useEffect(() => {
ml_up_down();
}, []);
return (
<View>
<Animated.Text>{displayValue}</Animated.Text>
</View>
);
}