使用動畫與風格的組件（反應母語）

Question

我遇到了一個錯誤，說明如下（通過iOS的測試）：

無法讀取空

的特性「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; 

這導致上面提到的錯誤，嘗試谷歌搜索，並無法找到任何解釋它是什麼。如有需要，請隨時申請進一步的細節。

相關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。