javascript - 更改高度槽动画时如何重叠其他控件？

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
  },
});

标签： javascriptreact-nativeecmascript-6

Answer 1

找到了，有位置：'absolute'