स्टाइल-घटकों (प्रतिक्रिया देशी)

Question

मैं निम्नलिखित बताते हुए एक त्रुटि का अनुभव कर रहा हूँ (आईओएस के माध्यम से परीक्षण किया) के साथ एनिमेटेड का उपयोग करना:

के प्रयास के दौरान संपत्ति अशक्त

की 'getScrollableNode' पढ़ा नहीं जा सकता प्रतिक्रिया और प्रतिक्रिया-मूल के लिए styled-components स्टाइलिंग टूल के साथ प्रतिक्रिया-मूल के Animated का उपयोग करने के लिए।

यहाँ एक <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; 

और यह:

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; 

मैं तो मेरे दृश्यों जहां मैं इसे करने के लिए एनीमेशन लागू करना चाहते हैं में से एक में इस घटक का आयात कर रहा हूँ ऊपर उल्लिखित त्रुटि में परिणाम, इसे गुगल करने का प्रयास किया और यह किसी भी प्रकार की स्पष्टीकरण को खोजने में सक्षम नहीं था। यदि आवश्यक हो तो अधिक जानकारी का अनुरोध करने के लिए स्वतंत्र महसूस करें।

संबंधित 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।