反应原生:如何动画视图从垂直堆叠到水平
问题描述:
因此,本质上,我有两个视图垂直堆叠开始和按钮按下他们需要动画,所以第一个视图scoots左侧和第二个视图上升并坐在第一个的右侧。看起来很简单,在第一个视图上调整flex并在第二个视图上更改顶部和左侧样式,在IOS上看起来很棒,但是在Android中,这会导致第二个视图在底部切割时出现问题(大概是因为View的flex或height对于内容来说不够高,但不幸的是我无法改变它,因为它会为下面的其余内容弄乱flex的样式)。反应原生:如何动画视图从垂直堆叠到水平
关于如何解决这个问题的任何建议?
这可能是不可能的,但我想知道是否有一种方法,无论是使用LayoutAnimation还是动画API,将这些视图从flexDirection'列'动画为'行'?这将是疯狂的方便。
答
布局动画是美好的,伙计们!根据需要,简单地在状态变化的“列”和“行”之间切换,并且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>