Как перевести X, перевести Y по определенной координате, а не по относительной точке? - PullRequest
Новая
       60

Как перевести X, перевести Y по определенной координате, а не по относительной точке?

5 голосов
/ 15 мая 2019

Мой вопрос касается использования translateX и translateY в анимации реакции и / или нативной реакции для анимации объекта до определенной точки.

Эти два преобразования перемещают объект относительно существующей точки.

Но для сценария существующая координата не важна, и я хочу убедиться, что объект перемещается в определенную точку, где бы он ни находился на экране.

Дополнительным ограничением является то, что я не могу анимировать стили top, bottom, left и right, поскольку в реакции-нативе, если мы анимируем эти стили, мы не можем использовать директиву useNativeDriver={true}, которая вызывает проблемы с производительностью.

1 Ответ

2 голосов
/ 27 мая 2019

Вы можете использовать опору onLayout, чтобы получить положение (относительно родителя) и высоту / ширину для любого компонента View.

Нечто подобное должно работать. Возможно, вам потребуется получить положение более родительских компонентов View, в зависимости от вашей текущей структуры. 

componentDidMount() {
  this.animatedValue = new Animated.Value(0);  
}

animate() {
  const { parentYPosition } = this.state;
  Animated.Timing(this.animatedValue, {
    toValue: FINAL_POSITION - parentYPosition
  }).start(); 
}

render() {
  return (
    <View 
      onLayout={event => {
        const { y } = event.nativeEvent.layout;
        this.setState({parentYPosition: y})
      }}
    >
      <Animated.View 
        style={{
          position: 'absolute',
          top: 0, 
          transform: [
          {
            translateY: this.animatedValue
          }
      />
    />
  );
}

https://facebook.github.io/react-native/docs/view#onlayout

...