React Native: как анимировать виды от вертикального до горизонтального

Question

Таким образом, по сути, у меня есть два вида, которые расположены вертикально, и при нажатии кнопки их нужно анимировать, чтобы первый вид двигался влево, а второй - вверх и располагался справа от первого. Кажется, достаточно просто выполнить настройку flex в первом View и изменить стиль сверху и слева на втором View, отлично смотрится на IOS, однако на Android это вызывает проблемы с обрезанием второго View снизу при его подъеме (предположительно, потому что flex или высота View недостаточно высоки для содержимого, но, к сожалению, я не могу изменить это, потому что он испортил стиль flex для остальной части содержимого ниже).

Любые предложения о том, как подойти к этому?

Это может быть невозможным, но мне интересно, есть ли способ, с помощью LayoutAnimation или Animated API, анимировать эти представления из столбца flexDirection в столбец? Это было бы безумно удобно.

Answer 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>