react-native - 如何使用 react-native-animatable 对文本组件内部的自定义组件进行动画处理？

Question

const MyCustomComponent = Animatable.createAnimatableComponent(Icon);

return(
<View>
<Animatable.Text style={styles.textStyle}>
      Made with{' '}
      <MyCustomComponent
        animation="pulse"
        iterationCount="infinite"
        name="ios-heart"
        style={{ fontSize: 18 }}
        color="red"
      />
    </Animatable.Text>
 </View>
);

我是学习 React Native Animation 的初学者。如果你有时间，请帮我解决这个问题。

我想将动画添加到 MyCustomComponent 但它发生了你能告诉我为什么会这样。谢谢你。

Answer 1

你不能这样做，如果它是动画文本，你可以期待动画 tex，如果你想要一个嵌套视图，将它包装在一个动画视图或普通视图中，并通过单独的动画文本和组件

<View>
<Animatable.Text style={styles.textStyle}>
      Made with{' '}
</Animatable.Text>
      <MyCustomComponent
        animation="pulse"
        iterationCount="infinite"
        name="ios-heart"
        style={{ fontSize: 18 }}
        color="red"
      />

 </View>

如果您发布预期结果的 gif，这将有所帮助