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

Question

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

机器人：

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