如何转换：在Android上通过整个屏幕翻译元素？答案

【问题标题】：How to transform: translate element through whole screen on Android?如何转换：在Android上通过整个屏幕翻译元素？
【发布时间】：2018-07-29 08:28:47
【问题描述】：

我正在使用 React Native 制作一些动画，我注意到在 Android 上，transform: [{ translateY: height }] 不像在 iOS 上那样占据整个屏幕。在 Android 上，它只需要它自己的高度。如何使 Android 动画看起来像 iOS 动画？

安卓：

iOS：

【问题讨论】：

标签： android ios reactjs react-native css-transforms

【解决方案1】：

尝试将动画样式添加到列表项的顶部视图中，并将列表的宽度和高度与屏幕匹配

【讨论】：

【解决方案2】：

问题在于包裹图像的 Touchable：

<TouchableHighlight key={item.id} onPress={handlePress}>
  <Animated.View
    onLayout={handleOnLayout}
    style={[this.animatedImageStyle(item.id)]}
  >
    <Image
      onLayout={handleOnLayout}
      ref={node => (this.nodes[item.id] = node)}
      source={{ uri: item.uri }}
      style={[styles.image]}
    />
  </Animated.View>
</TouchableHighlight>

将 Animated.View 移到 Touchable Wrapper 之外解决了这个问题：

  <View key={item.id}>
    <Animated.View
      onLayout={handleOnLayout}
      style={[this.animatedImageStyle(item.id)]}
    >
      <Image
        onLayout={handleOnLayout}
        ref={node => (this.nodes[item.id] = node)}
        source={{ uri: item.uri }}
        style={[styles.image]}
      />
    </Animated.View>
    <TouchableWithoutFeedback onPress={handlePress}>
      <View style={[styles.image, { opacity: 0, marginTop: -75 }]} />
    </TouchableWithoutFeedback>
  </View>

【讨论】：