Question

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

使用React Native动画执行此操作的最佳方式是什么？

此时，如果我的某个状态值为false，则呈现按钮;如果为true，则呈现文本字段。

Answer 1

您可以使用Animated API为react-native中的任何样式属性设置动画。如果您能够在一系列样式更改中表示更改，则Animated API可以执行此操作。例如，将不透明度从1设置为0并返回到1将使淡出效果明显淡化。文档更清楚地解释了动画

您也可以选择性渲染来装载或隐藏组件

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

反应原生文档中的淡出示例

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>
  );
 }
}

使用动画替换另一个组件

1 个答案: