У меня есть список дел, каждый элемент списка имеет флажок. Когда я устанавливаю флажок, анимированный эффект зачеркивания должен отображаться слева направо. Как это сделать?
🤔 А знаете ли вы, что...
React поддерживает локализацию и мультиязычность.
К сожалению, вы не можете анимировать удар напрямую, но я использовал некоторые приемы для достижения того же эффекта.
import React from 'react';
import { Animated, Easing, Text, View, StyleSheet } from 'react-native';
export default function App() {
const ref = React.useRef(View.prototype);
const animatedValue = React.useRef(new Animated.Value(0)).current;
const [textWidth, setTextWidth] = React.useState(0);
const [textHeight, setTextHeight] = React.useState(0);
React.useEffect(() => {
ref.current.measure((x, y, w, h) => {
setTextWidth(w);
setTextHeight(h);
animateStrike();
});
}, []);
const animateStrike = () => {
Animated.timing(animatedValue, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
}).start();
};
const strikeWidth = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, textWidth],
extrapolate: 'clamp',
});
return (
<View style = {styles.container}>
<View>
<Text style = {styles.text} ref = {ref}>
Some Dummy Text
</Text>
<Animated.View
style = {[
styles.strike,
{ width: strikeWidth, top: textHeight / 2 + 1 },
]}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: '400',
},
strike: {
position: 'absolute',
height: 2,
backgroundColor: 'red',
},
});
Вы можете посмотреть демо здесь.
Невозможно добиться strikethough
текста с анимацией, но вы можете настроить его так, как здесь Текстовая анимация с помощью CSS — зачеркнуть строку
Вы можете создать собственный горизонтальный ProgressBar
и анимировать его с абсолютным значением Text
, чтобы он выглядел так, как вы хотите.