Sử dụng Animated với theo kiểu-linh kiện (phản ứng bản địa)

Question

Tôi đang gặp một lỗi nêu sau đây (thử nghiệm qua iOS):

không thể đọc thuộc tính 'getScrollableNode' null

Trong khi cố gắng sử dụng công cụ tạo kiểu Animated phản ứng của người bản xứ bên cạnh styled-components công cụ tạo kiểu để phản ứng và phản ứng gốc.

Dưới đây là ví dụ về một thành phần <Logo /> tôi đã tạo:

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; 

Tôi sau đó nhập khẩu thành phần này thành một trong những cảnh quay của tôi, nơi tôi muốn áp dụng hình ảnh động với nó:

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; 

Và đây kết quả trong lỗi được đề cập ở trên, đã cố gắng Google và không thể tìm thấy bất kỳ loại giải thích nào cho nó là gì. vui lòng yêu cầu thêm chi tiết nếu cần.

liên quan vấn đề GitHub:https://github.com/styled-components/styled-components/issues/341

Answer 1

Vấn đề này thực sự là không liên quan đến kiểu-linh kiện. Đúng hơn, đó là react-native one

Giải pháp thay thế cho việc này là sử dụng class thay vì thành phần không quốc tịch.

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

Đây là địa chỉ github repo nơi hoạt động. Nếu bất cứ ai muốn sao chép nó, chỉ cần bỏ ghi chú 14-21 dòng để xem lỗi.

Tôi nghĩ rằng vấn đề xuất phát từ Hoạt ảnh trying to attach ref thành thành phần không trạng thái. Và stateless components cannot have refs.