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

Question

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

Android:

iOS:

Answer 1

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

Answer 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>

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

How to transform: translate element through whole screen on Android?

android

ios

css-transforms

reactjs

react-native