Question

所以，基本上，我有两个垂直堆叠的视图开始，按下按钮时需要设置动画，因此第一个视图向左侧移动，第二个视图向上移动并位于第一个视图的右侧。似乎很容易在第一个View上调整flex并在第二个View上改变顶部和左侧样式，在IOS上看起来很棒，但是在Android上这会导致第二个View在底部被切断时出现问题（大概是因为View的弹性或高度对于内容来说不够高，但不幸的是我无法改变它，因为它会影响下面其余内容的弹性样式。

有关如何处理此事的任何建议？

这可能是不可能的，但我想知道是否有一种方法，无论是使用LayoutAnimation还是动画API，都可以通过flexDirection列来设置这些视图的动画。到＆＃39;行＆＃39;？那会很疯狂。

Answer 1

布局动画很精彩，大家好！只需在状态更改时根据需要在“列”和“行”之间切换，LayoutAnimation将处理剩余的超级整洁。对于遇到同样问题的其他人来说，这是一个简单的例子，希望有所帮助：

export default class Test extends Component {
  constructor() {
    super();
    this.state = {
      toggleStyle: 'column',
    }

    if(Platform.OS === 'android'){
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }
  }

  _onPress = () => {
    LayoutAnimation.configureNext(CustomLayoutAnimation.position);

    let direction = this.state.toggleStyle === 'row' ? 'column' : 'row'
    this.setState({toggleStyle: direction})
  }

  render() {
    return(
      <View style={{flex: 1}}>
      <View style={{flex: 1}} />
        <View style={{flex: 1, flexDirection: this.state.toggleStyle}}>
          <View style={{flex: 1, width:'100%', backgroundColor: 'blue'}} />
          <View style={{flex: 1, width:'100%', backgroundColor: 'green', justifyContent: 'center', alignItems: 'center'}}><Text onPress={() => this._onPress()}>Toggle</Text></View>
        </View>
        <View style={{flex: 1}} />
      </View>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React Native：如何通过垂直堆叠到水平来动画视图

1 个答案: