Как связать изменение переменной смещения прокрутки с анимированной переменной в React native? - PullRequest
Новая
       24

Как связать изменение переменной смещения прокрутки с анимированной переменной в React native?

0 голосов
/ 25 марта 2019

Дело в том, что у меня есть иерархия компонентов. У меня есть родительский компонент, дочерний компонент и дочерний компонент (для облегчения навигации по коду). В родительском компоненте у меня есть ScrollView и переменная (не анимированная переменная) contentOffset (в состоянии родителя), которая меняется всякий раз, когда происходит прокрутка. Переменный интервал находится между [-100,100].

Родительский компонент 

 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 в качестве реквизита дочернему компоненту, а затем дочернему компоненту. Если я буду использовать код, интервал масштабирования будет таким же [-100,100] (и текст будет масштабирован настолько, что мы его не увидим). Для этого в React Native у нас есть функция .interpolate в Animated lib, которая берет входной интервал и выдает результат (поэтому, когда contentOffset равен -100, мы будем уменьшать / увеличивать, например, только на 4 пункта, а не на 100.

Но мы не можем передать переменную contentOffset, потому что это не Animated.Value

Это правильный код для интерполяции, и он будет работать, но AnimatedTextValue из дочернего компонента Child не связан с Переменная contentOffset из состояния родителя 

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

Как мы можем связать эту переменную с дочерним объектом Animated.Value ребенка?

1 Ответ

0 голосов
/ 25 марта 2019

Почему бы не сделать contentOffset Animated.Value? Затем используйте 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);
}
...