如何链接改变滚动偏移变量到动画变量在反应本机？

Question

问题是我有组件的层次结构。我有一个父html" target="_blank">组件、子组件和子组件（便于在代码中导航）。在父级组件中，我有一个ScrollView和一个变量（不是动画变量）contentOffset（处于父级状态），每当滚动发生时，该变量都会发生变化。变量间隔介于[-100100]之间。

父成分

 constructor(props) {
 super(props);
 this.state = {
   contentOffset: 1
 }
 this.onScrollEvent = this.onScrollEvent.bind(this);
 }


 onScrollEvent = event => {
 this.setState(
   {
     contentOffset: event.nativeEvent.contentOffset.y,
   }
 )
 }               
 render() { 
    return (                                        
    <ScrollView 
     showsVerticalScrollIndicator={false}
     onScroll={this.onScrollEvent.bind(this)>
        <ChildOne
           animation={this.state.contentOffset}/>
    );
  }

子组件

  constructor(props) {
      super(props);
  }
  render() { 
     return (   
     <NestedChild 
              handleClick={this.openSettingsInHeader} 
              header="What the..."
              transformAnimation={this.props.animation}/>
     );
   }

子组件

   constructor(props) {
       super(props);
       this.state = {
           AnimatedTextValue: new Animated.Value(0),
           ProfileOffset: this.props.transformAnimation
       }
   }

   render() { 

      const animatedStyles = {
           transform: [
             { scale: this.props.transformAnimation }]} <== if I'll pass it here the scale would be huge [-100,100], so we need to interpolate this, but the variable that's passed through props is not animated value and .interpolate function is not working
      return (   
      <Animated.Text style={[styles.nameStyle,animatedStyles]}>Hi</Animated.Text>
      );
    }

我将contentOffset变量作为prop传递给子组件，然后传递给子组件的子组件。如果我使用代码，缩放间隔将是相同的[-100100]（文本将被缩放到我们看不到的程度）。为此，在React Native中，我们有函数。在动画库中插值，该动画库采用输入间隔并给出输出（因此，当contentOffset为-100时，我们将按比例缩小/放大，例如仅在4个点上，而不是在100上。

但是我们不能传递内容偏移变量，因为它不是动画。价值

这是插值的正确代码，它可以工作，但子组件的AnimatedTextValue未与父组件状态的contentOffset变量链接

  const headerTranslate = this.state.AnimatedTextValue.interpolate({
  inputRange: [-100, 100],
  outputRange: [4,-4],
  extrapolate: 'clamp'
});

如何将此变量链接到孩子的子动画。价值

Answer 1

为什么不使内容偏移动画。价值？然后像这样使用setValue而不是setState：

constructor(props) {
  super(props);

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

  this.onScrollEvent = this.onScrollEvent.bind(this);
}


onScrollEvent = event => {
  this.state.contentOffset.setValue(event.nativeEvent.contentOffset.y);
}