Как перекрывать другие элементы управления при изменении высоты через анимацию?

Question

Я хочу перекрывать другие элементы управления при изменении высоты другого элемента управления. Это должно быть что-то вроде того, когда вы открываете представление.

Я создал небольшой пример:

И когда я нажимаю на синюю кнопку, она идет вверх:

Но другие элементы управления просто становятся умнее. Я бы хотел «перекрыть», чтобы красная коробка больше не была видна, только после того, как я снова уменьшу синюю коробку.

Вот код:

import React, { Component } from 'react';
import { Animated, TouchableOpacity, Text, View, StyleSheet } from 'react-native';


export const IMAGE_HEIGHT = 50;
export const IMAGE_HEIGHT_SMALL = 500;


export default class App extends Component {
  constructor(props) {
    super(props)

    this.moveAnimation = new Animated.Value(50)
  }

  _changeHeight = () => {
    Animated.spring(this.moveAnimation, {
      duration: 50,
      toValue:IMAGE_HEIGHT_SMALL,
    }).start()
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:1, backgroundColor:'red', alignSelf: 'stretch'}}>
          <View style={{flex:1, backgroundColor:'yellow'}}>
            <Text>Das ist einer Text in gelb</Text>
          </View>
          <View style={{flex:1, backgroundColor:'red'}}>
            <Text>Das ist einer Text in rot</Text>
          </View>
        </View>
        <Animated.View style={[styles.panel, {height:this.moveAnimation}]}>
          <TouchableOpacity style={styles.loginButton} onPress={this._changeHeight}>
                <Text style={{textAlign:'center'}}>Login</Text>
          </TouchableOpacity>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  panel:{
    height:50, 
    justifyContent :'flex-end', 
    backgroundColor:'blue', 
    alignSelf: 'stretch'
  },
  loginButton: {
    backgroundColor: '#2980b9',
    flex:1
  },
});

Answer 1

Нашел, есть позиция: 'абсолют'