Использование Animated с ухоженными-компонентами (реагируют родной)

Question

Я испытываю ошибку, указав следующее (проверено с помощью прошивкой):

Не удается прочитать свойство «getScrollableNode» нулевых

Стараясь для использования реактивной нативной Animated вдоль стороны styled-components инструмент для укладки для реагирования и реагирования.

Вот пример <Logo /> компонент я создал:

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; 

Я затем импортировать этот компонент в одну из моих сцен, где я хочу, чтобы применить анимацию к нему:

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; 

И это приводит к ошибке, упомянутой выше, попробовал Googling и не смог найти никакого объяснения тому, что это. не стесняйтесь обращаться за дополнительной информацией, если это необходимо.

Связанные вопрос GitHub:https://github.com/styled-components/styled-components/issues/341

Answer 1

Этот вопрос на самом деле не связано с стилизованных-компонентов. Скорее, это react-native one

Обходным путем для этого является использование class вместо компонента без гражданства.

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

Вот github repo, где он работает. Если кто-то хочет воспроизвести его, просто раскомментируйте 14-21 строки, чтобы увидеть ошибку.

Я думаю, проблема связана с анимированным trying to attach ref компонентом без гражданства. И stateless components cannot have refs.