Animation 使用动画将一个组件替换为另一个组件

我希望在视图中同时设置一个文本字段的动画和一个视图外的按钮的动画，这样看起来文本字段正在替换按钮。（它们大小相同，占用屏幕的相同区域）

使用React本机动画执行此操作的最佳方法是什么

---

此时，如果其中一个状态值为false，则渲染按钮，如果为true，则渲染文本字段。

您可以使用动画API在react native中设置任何样式属性的动画。 如果您能够以一系列样式更改来表示更改，那么动画API就可以做到这一点。例如，将不透明度从1设置为0，再设置为1，将产生一个很好的淡入淡出效果。文档更清楚地解释了动画

您还可以选择渲染以装载或隐藏组件

<View style={{/*style props that need to be animated*/}}
{ boolShowText? <Text/> : <View/> }
</View>

---

So@nishanth，使用上面的示例，当子视图淡入时，如何设置文本淡入的动画？如文本中所述，可以按顺序设置不透明度状态从1到0到1的动画。您还可以在每个动画之后获得回调以交换组件
class FadeInView extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     fadeAnim: new Animated.Value(0), // init opacity 0
   };
}
componentDidMount() {
  Animated.timing(          // Uses easing functions
    this.state.fadeAnim,    // The value to drive
    {toValue: 1},           // Configuration
  ).start();                // Don't forget start!
}
render() {
  return (
    <Animated.View          // Special animatable View
      style={{opacity: this.state.fadeAnim}}> // Binds
      {this.props.children}
    </Animated.View>
  );
 }
}