javascript - استخدام الرسوم المتحركة مع المكونات على غرار(رد الفعل الأم)



reactjs animation (1)

هذه المسألة في الواقع لا علاقة لمكونات على غرار. بدلا من ذلك، انها رد فعل الأصلي واحد

الحل لهذا هو استخدام class بدلا من مكون عديمي الجنسية.

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

هنا هو الريبو جيثب حيث يعمل. إذا كان أي شخص يريد إعادة إنتاجه، فقط أونكومنت 14-21 خطوط لرؤية الخطأ.

أعتقد أن المسألة تأتي من الرسوم المتحركة في محاولة لإرفاق ref إلى مكون عديمي الجنسية. ولا يمكن أن تحتوي المكونات عديمي الجنسية على ريفس .

أواجه خطأ يشير إلى التالي (تم اختباره عبر نظام التشغيل يوس):

لا يمكن قراءة الخاصية 'جيتسكرولابلنود' من فارغة

بينما كان يحاول استخدام رد الفعل الأصلي المتحركة على طول الجانب نصب مكونات أداة التصميم للرد ورد فعل الأصلي.

في ما يلي مثال لمكون <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;

وهذا يؤدي إلى خطأ المذكورة أعلاه، حاول غوغلينغ عليه، ولم يكن قادرا على العثور على أي نوع من التفسير لما هو عليه. لا تتردد في طلب مزيد من التفاصيل إذا لزم الأمر.

ذات صلة جيثب المسألة: https://github.com/styled-components/styled-components/issues/341





styled-components