React Native：如何为视图设置动画，使其从垂直堆叠变为水平堆叠

Question

所以，基本上，我有两个垂直堆叠的视图开始，按下按钮时它们需要动画，所以第一个视图向左移动，第二个视图上升并位于第一个视图的右侧.在第一个视图上调整 flex 并在第二个视图上更改顶部和左侧样式似乎很容易，在 IOS 上看起来不错，但是在 Android 上这会导致第二个视图被切断的问题当它上升时在底部（大概是因为 View 的 flex 或 height 对内容来说不够高，但不幸的是我不能改变它，因为它弄乱了下面其余内容的 flex 样式）。

关于如何解决这个问题有什么建议吗？

这可能是不可能的，但我想知道是否有办法，使用 LayoutAnimation 或动画 API，将这些视图从 flexDirection 'column' 动画化到 [=17] =]？那会非常方便。

Answer 1

LayoutAnimation 很棒，伙计们！只需根据需要在 'column' 和 'row' 状态更改之间切换，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：如何为视图设置动画，使其从垂直堆叠变为水平堆叠

React Native: how to animate Views from being stacked vertically to horizontally

layout

animation

react-native

react-native-flexbox

react-animated