ネイティブアニメーションをリアクションする既存のビューを上にではなく、アニメーションを下方にプッシュ

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> 

拡大がtrueの場合、次にExpandableBarであなたがダウンしてアニメーション化したいです。 ExpandableBarはクラス（明らかに）でなければならないことにも注意してください。