ScrollTo undefined в анимированном ScrollView

При использовании Animated.createAnimatedComponent(ScrollView) для создания анимированного ScrollView более не возможно использовать scrollTo.

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

<AnimatedScrollView ref={(ref) => this.list = ref}>
  <View style={{height: 1000}} />
</AnimatedScrollView>

Вызов this.list.scrollTo({x: 0, y: 0}) дает следующую ошибку:

_this.list.scrollTo is not a function

Он отлично работает на обычном ScrollView. Есть ли способ решить это?

Ответ 1

Ответ @max23_ может пока работать, но это не правильный способ - как правило, мы никогда не должны обращаться к закрытым переменным напрямую, так как они часто подвержены изменениям. (редактировать: неуважение :-))

Благодаря этому запросу на извлечение новый и перспективный способ получения ref на завернутый компонент заключается в использовании служебного метода getNode(), поскольку доступ к закрытым переменным (с добавлением _) небезопасен от будущих изменений API.

Итак, новый способ сделать это

ref={c => (this.myRef = c)}

а затем при вызове метода, делая

this.myRef.getNode().scrollTo({
  y: 0,
  animated: true,
});

:-)

Ответ 2

Попробуйте это, чтобы получить возврат компонента от метода Animated.createAnimatedComponent:

ref={(ref) => this.list = ref._component}

Тогда вызов this.list.scrollTo({x: 0, y: 0}) должен работать.

Ответ 3

Основываясь на ответе @jhm - новый, рекомендуемый способ создания ссылки на компонент, поскольку в React 16.3 используется React.createRef(), как упомянуто @cyqui.

С обычным (примечание: не анимированным) компонентом мы просто создали бы ссылку на ScrollView рекомендуемым способом:

scrollView = React.createRef();

<ScrollView
  ref={this.scrollView}>

и использование статических методов как таковых:

this.scrollView.current.scrollTo({x: number, y: number, animated: true|false})

Однако при работе с компонентом Animated мы переходим к прямой манипуляции, которая требует от нас получить собственный узел компонента перед вызовом любых статических методов. Поэтому вы получите следующее:

scrollView = React.createRef();

<Animated.ScrollView
  ref={this.scrollView}>

this.scrollView.current.getNode().scrollTo({x: number, y: number, animated: true|false})

Ответ 4

Просто добавив еще один ответ, так как оба решения "getNode" и "_component" не спомогли мне. Я использую реагировать родной 0,57. Успейте заставить это работать, используя scrollToOffset

componentDidMount() {
  this.refs.listRef.scrollToOffset({ offset: 0,  animated: false })
}

render() {
  return (
    <FlatList ref="listRef" ... />
  }
};

Ответ 5

Если RN> = 0,59 (возможно, раньше) и следующая настройка Ref:

const ScrollViewX = Animated.createAnimatedComponent(ScrollView);

  _scrollView = React.createRef();

<ScrollViewX
      ref={this._scrollView}>

Вы можете вручную прокрутить анимированный компонент следующим образом:

this._scrollView.current._component.scrollTo({x: number, y: number, animated: true|false})

(ScrollToOffset устарел и, вероятно, удален в 0.6)