Estoy trabajando en algunas animaciones en React Native y noté que en Android, el transform: [{ translateY: height }] no ocupa toda la pantalla como en iOS. En Android, solo toma su propia altura. ¿Cómo puedo hacer que la animación de Android se parezca a la de iOS?

Android:
Android

IOS:
iOS

8
KadoBOT 19 feb. 2018 a las 09:19

2 respuestas

La mejor respuesta

Intente agregar el estilo animado a la vista superior de los elementos de la lista y haga coincidir el ancho y el alto de la lista con la pantalla

2
Shayan_Aryan 19 feb. 2018 a las 13:40

El problema era que Touchable envolvía la imagen:

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

Mover el Animated.View fuera de Touch Wrapper resolvió el problema:

  <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>
1
KadoBOT 20 feb. 2018 a las 07:43