反應原生動畫向下推動動畫，而不是向上移動現有視圖

Question

我試圖讓我的動畫視圖向下和滾動視圖的內容而不是在我的頂部固定位置欄上，但是當動畫開始動畫視圖結束吃起來容器吧的空間。我玩過paddingTop，marginTop，但似乎是黑客。

這裏是一個自包含的代碼示例顯示我想要做的事：

import React, { Component } from 'react'; 
import { 
    AppRegistry, StyleSheet, Text, View, Animated, Dimensions, ScrollView, 
    Button 
} from 'react-native'; 

const { width } = Dimensions.get('window'); 


const make_text = (text='Hello', color='blue') => (
    <Text 
    style={{textAlign: 'center', fontSize: 24, backgroundColor: color, margin: 20}}> 
    {text} 
    </Text> 
); 

class Fix_bar extends Component { 

    state = { height: new Animated.Value(0) }; 

    expand_dropdown =() => { 
    Animated.timing(this.state.height, { 
     toValue: 100 
    }).start(); 
    } 

    fold_dropdown =() => { 
    Animated.timing(this.state.height, { 
     toValue: 0 
    }).start(); 
    } 


    render() { 

    const s = { 
     position: 'absolute', height: 150, backgroundColor: 'red', paddingTop: 20, width 
    }; 

    return (
     <View style={s}> 
     <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}> 
      <Text style={{fontSize: 24, paddingTop: 50}}> Left side thing</Text> 
      <Text style={{fontSize: 24, paddingTop: 50}}> Right side thing</Text> 
     </View> 

     <Button title={'Expand'} onPress={this.expand_dropdown}/> 
     <Button title={'Fold'} onPress={this.fold_dropdown}/> 

     <View style={{backgroundColor: 'black', height: 1}}/> 
     <Animated.View style={{height: this.state.height}}> 
      {make_text('world', 'aliceblue')} 
      {make_text('world', 'aliceblue')} 
      {make_text('world', 'aliceblue')} 
     </Animated.View> 
     </View> 
    ); 
    } 
} 

class animate_example extends Component { 
    render() { 
    return (
     <View style={{backgroundColor: 'orange', flex: 1}}> 
     <Fix_bar/> 
     <ScrollView style={{marginTop: 150}}> 
      <View style={{justifyContent: 'space-between'}}> 
      {make_text()} 
      {make_text()} 
      {make_text()} 
      {make_text()} 
      {make_text()} 
      </View> 
     </ScrollView> 
     </View> 
    ); 
    } 
} 



AppRegistry.registerComponent('animate_example',() => animate_example); 

我有一個想法是讓與我打算高度的透明度在fix_bar組件尾隨查看爲下拉，但沒有探討這個想法。

Answer 1

我建議以下層次：

const ScrollViewContainer =() => 
    <ScrollView style={{marginTop: 150}}> 
    <View style={{justifyContent: 'space-between'}}> 
     {make_text()} 
     {make_text()} 
     {make_text()} 
     {make_text()} 
     {make_text()} 
    </View> 
    </ScrollView>; 

const ExpandableBar = (props: {expanded: boolean}) => 
    <View style={{position: "absolute", top: 0, left: 0, right: 0, bottom: 0}} /> 

const render =() => 
    <View> 
    <Fix_bar /> 
    <View style={{flex: 1}}> // container which fills remaining space 
    <ScrollViewContainer /> 
    <ExpandableBar /> 
    </View> 

然後在ExpandableBar你動畫下來，如果擴展是真實的。還請注意ExpandableBar應該是一個班級（顯然）。