使用带有样式组件的动画（react-native）

Posted 2023-03-15

【中文标题】使用带有样式组件的动画（react-native）

【英文标题】：Using Animated with styled-components (react-native)

【发布时间】：2017-05-16 11:06:56

【问题描述】：

我遇到以下错误（通过 ios 测试）：

无法读取 null 的属性“getScrollableNode”

在尝试将 react-native 的 Animated 与 styled-components 样式工具一起用于 react 和 react-native 时。

这是我创建的 <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

【参考方案1】：

这个问题实际上与 styled-components 无关。而是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。

【讨论】：

真的很漂亮，谢谢 :) 我将能够在 20 小时内奖励赏金