如何将X，translateY转换为特定坐标而不是相对点？

Question

我的问题是关于在react和/或react-native动画中使用translateX和translateY，以将对象设置为动画。

这两个变换使对象相对于现有点移动。

但是对于这种情况，现有坐标并不重要，我想确保将对象移动到屏幕上可能存在的任何点。

附加的限制是，我不能动画的风格top，bottom，left并right因为在反应本地的，如果我们这些动画风格那么我们不能使用useNativeDriver={true}这会导致性能问题指令。

Answer 1

您可以使用onLayoutprop 获取任何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