1

我有一个具有滚动视图的组件

class DiscoverThings extends React.Component {
  state = { scrollY: new Animated.Value(0), };

  onPageScroll = ({ nativeEvent }) => {
    Animated.event(
       [{nativeEvent: 
       {contentOffset: {y: this.state.scrollY}}}],
       {useNativeDriver: true},
      );
    this.props.setScrollableDistance(this.state.scrollY);
   }


  render(){
   return(
    <ScrollView
       onScroll={this.onPageScroll}
       scrollEventThrottle={1500}
       />
  )
  }
}

函数 setScrollable distance 将 scrollY 的值分派到全局存储

export const setScrollableDistance = scrollY => ({
  type: SET_SCROLLABLE_DISTANCE,
  payload: scrollY,
})

在减速机中我有

case SET_SCROLLABLE_DISTANCE:
console.log("********************", action.payload);
  return{
    ...state,
    scrollY: action.payload,
  };

来自 reducer 的 scrollY 的值被用于使用 Animated API 更新另一个组件中的页脚高度。

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableHighlight, Animated } from 'react-native';
import {connect} from 'react-redux';

const HEADER_MAX_HEIGHT = 60;
const HEADER_MIN_HEIGHT = 0;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

class Footer extends React.Component{
  render(){
    const headerHeight = this.props.app.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
      extrapolate: 'clamp',
    });
    return(
      <Animated.View style={styles.navbarContainer}>
        {
          navbarOptions.map((option) => {
            return (
              <TouchableHighlight
                key={option.slug}
                onPress={() => onSelect(option)}
              >
                <View style={styles.menuContainer}>
                  <Text style={isSelected ? styles.selectedMenu : styles.menu}>
                    {option.title}
                  </Text>
                </View>
              </TouchableHighlight>
            );
          })
        }
      </Animated.View>
    )
  }
}
const mapStateToProps = ({
  app,
}) => ({
   app,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(Footer);

在这里，我收到 this.props.app.scrollY.interpolate 未定义且不是函数的错误。

我应该怎么办？

4

0 回答 0