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

我遇到了一个错误说明（通过iOS测试）：

无法读取null的属性'getScrollableNode'

在尝试使用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;

这导致上面提到的错误，尝试谷歌搜索它，并无法找到任何形式的解释它是什么。如有必要，请随时索取更多详细信息。

7452

2018-01-02 10:37

起源

答案:

这个问题实际上与样式组件无关。相反，它是一个反应原生的

解决方法是使用 class 而不是无状态组件。

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

这里有一个 github repo 在哪里工作。如果有人想要重现它，只需取消注释14-21行即可查看错误。

我认为问题来自动画试图附加 ref 一个无国籍的组成部分。和无状态组件不能有refs。

2018-01-05 13:30

真的很整洁，谢谢:)我将能够在20小时内奖励赏金 - Ilja

答案: