Question

我试图将我的动画视图向下移动到ScrollView的内容而不是我的顶部固定位置栏上，但是当动画开始时，动画视图最终会占用容器栏的空间。我玩过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组件中创建一个尾随View，其透明度与我打算用于下拉列表的高度相关，但是没有探索过这个想法。

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应该是一个类（显然）。

React Native Animation向下推动动画，而不是向上覆盖现有视图

1 个答案: