我们如何在反应本机文本上制作动画删除线?
How can we make an animated strike through on react native text?
我有一个待办事项列表,每个列表项都有一个复选框。当我选中该框时,动画删除线效果应该从左到右显示。怎么做?
不幸的是,你不能直接对打击进行动画处理,但我使用了一些技巧来达到同样的效果。
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',
},
});
您可以查看演示 here。
无法实现 strikethough
带有动画的文本,但您可以像此处那样自定义它 Text animation with CSS - strike through line
您可以创建自定义水平 ProgressBar
并在 Text
上使用绝对值对其进行动画处理,这样它看起来可能与您想要的一样。
我有一个待办事项列表,每个列表项都有一个复选框。当我选中该框时,动画删除线效果应该从左到右显示。怎么做?
不幸的是,你不能直接对打击进行动画处理,但我使用了一些技巧来达到同样的效果。
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',
},
});
您可以查看演示 here。
无法实现 strikethough
带有动画的文本,但您可以像此处那样自定义它 Text animation with CSS - strike through line
您可以创建自定义水平 ProgressBar
并在 Text
上使用绝对值对其进行动画处理,这样它看起来可能与您想要的一样。