React native 布局之间的动画和弹性空间

我用justifyContent处理了3个块：“间隔”

在灰色区域中，底部块应在100个单位的高度上设置动画“循环反弹”。问题是我无法编辑底部块的边距，因为justifyContent属性导致中间块先移动，中间块应该被修复

import React, { Component } from 'react';
import { StyleSheet, Text, View, Easing, Animated, // Button,
ScrollView } from 'react-native';
import Button from 'react-native-button';

export default class App extends Component {

  constructor () {
    super()
    this.animatedValue = new Animated.Value(0)
    this.animate(Easing.bounce)
  }

  animate (easing) {
    this.animatedValue.setValue(0)
      Animated.timing(
        this.animatedValue,
        {
          toValue: 1,
          duration: 1000,
          easing
        }
    ).start( ()=> this.animate(Easing.bounce))
  }

  render () {
    const marginBottom = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 100]
        })
    return (
      <View style={{flex: 1,flexDirection: 'column',alignItems:"center",justifyContent: 'space-between' }}>
                        <View style={styles.block}><Text>top</Text></View>
                        <View style={styles.block}>><Text>second</Text></View>

                        <View style={{textAlign: "center",height:150,backgroundColor:"#555"}}>
                            <Animated.View style={[styles.block2, {marginBottom} ]}>
                            <Text style={{position:"absolute"}} >bottom</Text>
                            </Animated.View>
                        </View>
                    </View>
    );
  }
}

var styles = StyleSheet.create({
  block: {
    width: 50,
    height: 50,
    backgroundColor: 'red',

  },
   block2: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  }
});

---

更清楚地了解我想要实现的目标。这只是一个简单明了的动画

只需将您的marginBottom更改为marginTop即可

        <View style={{ textAlign: "center", height: 150, backgroundColor: "#555" }}>
          <Animated.View style={[styles.block2, { marginTop:marginBottom }]}>//<-changes--
            <Text style={{ position: "absolute" }}>bottom</Text>
          </Animated.View>
        </View>