Question

我有两个组件 - 一个包含一个scrollview和一个在滚动时触发的函数，另一个包含一个页脚，其高度我想在滚动时更改。

使用scrollView的第一个组件是这样的 -

const FOOTER_MAX_HEIGHT = 60;
const FOOTER_MIN_HEIGHT = 0;
const FOOTER_SCROLL_DISTANCE = FOOTER_MAX_HEIGHT - FOOTER_MIN_HEIGHT;
class Home extends React.Component {
  state= {
   scrollY: new Animated.Value(0),
  }

    onScroll = () => {
    console.log("scrolling");
    Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY }} }]);
  }

  renderFooter = () => {
    const footerHeight = this.state.scrollY.interpolate({
      inputRange: [0, FOOTER_SCROLL_DISTANCE],
      outputRange: [FOOTER_MAX_HEIGHT, FOOTER_MIN_HEIGHT],
      extrapolate: 'clamp',
    });
    return (
        <Footer
          footerHeight = {footerHeight}
        />
    );
  }

  render(){
    return(
     <View style={{flex: 1}}>
      <List onScroll={this.onScroll}/>
      {this.renderFooter()}
     </View>

    )
  }
}

在list.js中，我有一个像这样的函数的滚动视图

class List extends React.Component{
  render(){
    return(
    <ScrollView onScroll={this.props.onScroll}>{this.renderScrollViewElements()}</ScrollView>
    )
  }
}


import React from 'react';
import { View, Animated } from 'react-native';
const styles = StyleSheet.create({
  navbarContainer: {
    backgroundColor: 'red',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  menuContainer: {
    width: 80,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

    class Footer extends React.Component {

      render() {
        const { footerHeight } = this.props;

        return (
          <Animated.View style={[styles.navbarContainer, { height: this.props.footerHeight }]}>
            <View style={styles.menuContainer}>
               <Text>ABC</Text>
           </View>
          </Animated.View>
        );
      }
    }

此代码的问题在于页脚的高度恒定为60.即使滚动滚动视图，它也不会更新。

Answer 1

要注意的一点是，使用Animated API会在标准＆＃39;渲染＆＃39;之外运行。环。这意味着，在您的Home组件中，当您的 scrollY 更新时，它不一定会调用 render（）方法。这意味着你的footerHeight道具永远无法通过。

由于你的页脚是 Animated.View ，你应该直接将footerHeight作为带有高度的样式对象发送，作为样式无论是否调用render（），动画组件都会更新。

renderFooter = () => {
const footerHeight = this.state.scrollY.interpolate({
  inputRange: [0, FOOTER_SCROLL_DISTANCE],
  outputRange: [FOOTER_MAX_HEIGHT, FOOTER_MIN_HEIGHT],
  extrapolate: 'clamp',
});
return (
      <Footer 
         style={{height: footerHeight}}>
      />
);
}

在react-native中实现scrollview动画不起作用

1 个答案: