Animation Verwendung mit styled-Komponenten (reagieren-native)

Question

ich einen Fehler erlebt besagt folgende (via iOS getestet):

lesen Eigenschaft 'getScrollableNode' von null

Kann nicht Beim Versuch, zu verwenden reactive-native Animated entlang Seite styled-components Styling-Tool für reagieren und reagieren native.

Hier ist Beispiel einer <Logo /> Komponente I erstellt:

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; 

ich dann bin importieren diese Komponente in einer meiner Szenen, in denen ich Animation, um es anwenden möchten:

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; 

Und das Ergebnisse oben genannten Fehler, versucht Googeln und war nicht in der Lage, irgendeine Art von Erklärung zu finden, was es ist. Weitere Informationen erhalten Sie bei Bedarf.

Verwandte GitHub Ausgabe:https://github.com/styled-components/styled-components/issues/341

Answer 1

Dieses Problem ist eigentlich nicht zu Stil-Komponenten. Vielmehr ist es ein react-native one

Die Problemumgehung dafür ist die Verwendung class anstelle einer zustandslosen Komponente. Hier

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

ist ein github repo wo es funktioniert. Wenn jemand es reproduzieren möchte, kommentieren Sie einfach 14-21 Zeilen, um den Fehler zu sehen.

Ich denke, das Problem kommt von Animated trying to attach ref zu einer zustandslosen Komponente. Und stateless components cannot have refs.