1

所以，本质上，我有两个视图垂直堆叠以启动，按下按钮它们需要动画，因此第一个视图向左滑动，第二个视图上升并位于第一个视图的右侧。在第一个视图上调整 flex 并在第二个视图上更改顶部和左侧样式似乎很容易，在 IOS 上看起来很棒，但是在 Android 上，这会导致第二个视图在底部被切断时出现问题（大概是因为视图的 flex 或 height 对于内容来说不够高，但不幸的是我无法更改它，因为它会破坏下面其余内容的 flex 样式）。

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

这可能是不可能的，但我想知道是否有办法使用 LayoutAnimation 或 Animated API 将这些视图从 flexDirection 的“列”设置为“行”？那将是疯狂的方便。

4

1 回答 1

1

伙计们，LayoutAnimation 很棒！只需根据需要在状态更改时在“列”和“行”之间切换，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-14T22:32:22.447 回答