javascript - instalar - react native example

Uso de animación con componentes con estilo(react-native)

Question

Estoy experimentando un error que indica siguiente (probado a través de iOS):

No se puede leer la propiedad ''getScrollableNode'' de null

Al intentar usar la herramienta de estilo Animated along labour-components de react-native para reaccionar y reaccionar de forma nativa.

Aquí hay un ejemplo de un componente <Logo /> que creé:

import React from ''react'';
import { Image, Dimensions } from ''react-native'';
import styled from ''styled-components/native'';

const { width } = Dimensions.get(''window'');
const logoWidth = width - (width * 0.2);
const logoHeight = logoWidth * 0.4516;

const SLogoImage = styled(Image)`
  width: ${logoWidth};
  height: ${logoHeight};
`;

const Logo = ({ ...rest }) => (
  <SLogoImage
    source={require(''../assets/logo.png'')}
    {...rest}
  />
);

export default Logo;

A continuación, importo este componente a una de mis escenas donde quiero aplicarle animación:

import React from ''react'';
import { View, Animated } from ''react-native'';
import Logo from ''../components/Logo'';

const ALogo = Animated.createAnimatedComponent(Logo);

class HomeScene extends Component {
  state = {
    fadeAnim: new Animated.Value(0)
  }

  componentDidMount() {
    Animated.timing(
      this.state.fadeAnim,
      { toValue: 1 }
    ).start()
  }

  render() {
    <View>
      <ALogo style={{ opacity: this.state.fadeAnim }} />
    </View>

  }
}

export default HomeScene;

Y esto da como resultado el error mencionado anteriormente, intenté con Google y no pude encontrar ningún tipo de explicación para lo que es. no dude en solicitar más detalles si es necesario.

Problema relacionado con GitHub: https://github.com/styled-components/styled-components/issues/341

Answer 1

Este problema en realidad no está relacionado con los componentes con estilo. Más bien, es uno de reacción nativa

La solución para esto es usar class lugar de un componente sin estado.

class Logo extends React.Component {
  render () {
    return (
      <SLogoImage
        source={require(''./geofence.gif'')}
        {...this.props}
      />
    )
  }
}

Aquí hay un repositorio github donde está funcionando. Si alguien quiere reproducirlo, simplemente quite el comentario de 14-21 líneas para ver el error.

Creo que el problema viene de Animated tratando de adjuntar ref a un componente sin estado. Y los componentes sin estado no pueden tener referencias .