19

次のようなエラーが発生しています (iOS でテスト済み):

null のプロパティ 'getScrollableNode' を読み取ることができません

react-native のAnimated along 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;

次に、このコンポーネントを、アニメーションを適用したいシーンの 1 つにインポートします。

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

4

1 に答える 1

19

この問題は、実際には styled-components とは関係ありません。むしろ、それは反応ネイティブのものです

これを回避するclassには、ステートレス コンポーネントの代わりに使用します。

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

これが機能しているgithubリポジトリです。誰かがそれを再現したい場合は、14 ～ 21 行のコメントを外してエラーを確認してください。

この問題は、Animatedがステートレス コンポーネントにアタッチしようとしてrefいることが原因だと思います。また、ステートレス コンポーネントは refs を持つことができません。

于 2017-01-05T13:30:47.790 に答える