React-Native，如何为多行文本的textAlign设置动画？

Question

我正在使用本机0.60，我需要设置动画多行道具textAlign从“中心”到“左侧”。

我尝试使用Animated.Text和LayoutAnimation来做到这一点，但它们仅使帧动画。 因此，我想到了将多行文本拆分为多行文本的方法，可以分别设置动画效果，但是我失败了，这似乎是一种肮脏的解决方法。

Answer 1

您可以设置textAlign: 'center'，但可以设置道具minWidth的动画：

const minWidth = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['100%', '0%'],
});


<Animated.Text
  style={{
    textAlign: 'center',
    alignSelf: 'flex-start',
    minWidth,
  }}
>
  Example text
</Animated.Text>

因此，如果minWidth为0％，则文本将向左对齐。