在onLayout中创建动画值：好的还是坏的做法？

Question

有关定义动画值的最佳做法的简短问题：在组件的onLayout回调中创建动画值是否是反模式？我要求一个特定的场景，其中动画值应该与样式表中以百分比表示的组件的高度（以像素为单位）和状态中存储的另一个动画值相关。

让我们假设以下代码：

    class MotherComponent extends Component {
      state = {
        animatedValue: Animated.Value(0)
      }

      render() {
        const translateY = this.state.animatedValue.interpolate({
          inputRange: [0, 1],
          outputRange: [260, 0],
          extrapolate: 'clamp'
        });

        return (
          <View>
            <View1/>
            <View2 style={[
              { 
                position: 'absolute', 
                top: '50%', 
                bottom: 0,
                right: 0,
                left: 0
              },
              {
                transform: {
                  translateY
                }
              }
            ]} />
          </View>
        )
      }
    }

您可以看到translateY outputRange需要知道View2高度的像素值才能将其从屏幕上移开。该值从一种屏幕大小更改为另一种屏幕大小。