Korzystanie Animated z stylizowany-komponentów (reagują-native)

Question

mam wystąpił błąd informujący następujący (testowane przez iOS):

nie można odczytać własności 'getScrollableNode' null

Starając korzystać z narzędzia do stylizacji języka Animated od reaktywnego native styled-components do reagowania i reagowania natywnego.

Oto przykład <Logo /> komponentu I Utworzono:

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; 

jestem następnie importowanie tego składnika w jednej z moich scen gdzie chcę zastosować animację do niego:

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; 

i to skutkuje wspomnianym wyżej błędem, próbował googlować i nie był w stanie znaleźć żadnego wyjaśnienia tego, co to jest. W razie potrzeby możesz poprosić o dalsze szczegóły.

pokrewne GitHub problem:https://github.com/styled-components/styled-components/issues/341

Answer 1

Kwestia ta nie jest faktycznie związana z stylizowany-komponentów. Jest to raczej obejście tego problemu polegające na użyciu class zamiast elementu bezstanowego.

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

Tutaj jest github repo, gdzie działa. Jeśli ktokolwiek chce go odtworzyć, po prostu odkomentuj 14-21 linii, aby zobaczyć błąd.

Myślę, że problem pochodzi z Animated trying to attach ref dla elementu bezstanowego. I stateless components cannot have refs.