如何在设置字体大小动画时将文本保持在同一位置？反应本机
我正在研究文本缩放，其中我想缩放文本但保持 x 位置。现在，我正在缩放文本，但它丢失了当前位置。有人可以帮我吗？
<Animated.View style={{ transform: [{ translateY: transText }] }}>
<Animated.View onLayout={({ nativeEvent: { layout: { width, height } } }) => {
label.current = { width, height };
}} style={{ width: width - (width / 3), transform: [{ scale: textScale }, { translateX: labelTransX }, { translateY: labelTransY }], justifyContent: 'flex-end' }}>
<TouchableWithoutFeedback onPress={handleMenu}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View>
<Animated.Text style={{ color: isDarkMode ? colors.TextBodyL : 'black', fontSize: 28, fontWeight: 'bold' }} numberOfLines={1}>
{mainLabel}
</Animated.Text>
</View>
<Animated.View style={{ transform: [{ rotate: rotate.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], extrapolate: 'extend' }) }] }}>
<Icon name={'caret-down-outline'} size={20} color={isDarkMode ? colors.TextBodyL : 'black'} />
</Animated.View>
</View>
</TouchableWithoutFeedback>
</Animated.View>
<Animated.View style={{ transform: [{ translateY: labelTransY }] }}>
<Text style={{ color: isDarkMode ? colors.TextBodyL : colors.TextBodyD }}>
{notesState.length} notes
</Text>
</Animated.View>
</Animated.View>
上面的代码以某种方式使文本保持其位置，但不太准确。
I am working on Text Scaling in which I want to scale the text but with keeping the x position. Now, I am scaling the Text but it's loses it's current position. Can someone help me out with it?
<Animated.View style={{ transform: [{ translateY: transText }] }}>
<Animated.View onLayout={({ nativeEvent: { layout: { width, height } } }) => {
label.current = { width, height };
}} style={{ width: width - (width / 3), transform: [{ scale: textScale }, { translateX: labelTransX }, { translateY: labelTransY }], justifyContent: 'flex-end' }}>
<TouchableWithoutFeedback onPress={handleMenu}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View>
<Animated.Text style={{ color: isDarkMode ? colors.TextBodyL : 'black', fontSize: 28, fontWeight: 'bold' }} numberOfLines={1}>
{mainLabel}
</Animated.Text>
</View>
<Animated.View style={{ transform: [{ rotate: rotate.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], extrapolate: 'extend' }) }] }}>
<Icon name={'caret-down-outline'} size={20} color={isDarkMode ? colors.TextBodyL : 'black'} />
</Animated.View>
</View>
</TouchableWithoutFeedback>
</Animated.View>
<Animated.View style={{ transform: [{ translateY: labelTransY }] }}>
<Text style={{ color: isDarkMode ? colors.TextBodyL : colors.TextBodyD }}>
{notesState.length} notes
</Text>
</Animated.View>
</Animated.View>
This code above somehow keeps text to maintain it's position but not too much accurate.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有几种选择。
简单：将文本放入容器中
justifyContent: 'center',alignItems: 'center'更烦人：添加负数
marginTop和marginLeft 到您的动画文本属性，但将该数量乘以fontSize的变化，再乘以 PixelRatio/fontScale。希望第一个选项适合您；如果没有，请告诉我您是否需要有关第二个的更多信息。
There are a couple of options.
Easy: Put your text in a container with
justifyContent: 'center', alignItems: 'center'More annoying: add negative
marginTopandmarginLeftto your animated text properties, but multiply that amount by the change infontSize, multiplied by PixelRatio/fontScale.Hopefully the first option works for you; if not, let me know if you need more info on the second.