反应原生：如何动画视图从垂直堆叠到水平

因此，本质上，我有两个视图垂直堆叠开始和按钮按下他们需要动画，所以第一个视图scoots左侧和第二个视图上升并坐在第一个的右侧。看起来很简单，在第一个视图上调整flex并在第二个视图上更改顶部和左侧样式，在IOS上看起来很棒，但是在Android中，这会导致第二个视图在底部切割时出现问题（大概是因为View的flex或height对于内容来说不够高，但不幸的是我无法改变它，因为它会为下面的其余内容弄乱flex的样式）。反应原生：如何动画视图从垂直堆叠到水平

关于如何解决这个问题的任何建议？

这可能是不可能的，但我想知道是否有一种方法，无论是使用LayoutAnimation还是动画API，将这些视图从flexDirection'列'动画为'行'？这将是疯狂的方便。

来源

2017-07-14 swimisbell

布局动画是美好的，伙计们！根据需要，简单地在状态变化的“列”和“行”之间切换，并且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>

来源

2017-07-14 22:32:22 swimisbell

反应原生：如何动画视图从垂直堆叠到水平

回答

相关问题