web-dev-qa-db-ja.com

ソースを要求するためにどの小道具タイプをチェックする必要がありますか？

私はreact nativeに基づいてプロジェクトを書いています。コンポーネントの型チェックにprop-typesを使用しています。ここで、react-nativeのImageコンポーネントを自分のImageコンポーネントでラップします。次のコードで、私自身のImageコンポーネントを参照してください。

import React from 'react';
import { Image as ImageNative } from 'react-native';
import PropTypes from 'prop-types';

const Image = ({ style, source }) => (
  <ImageNative source={source} style={style} />
);

Image.defaultProps = {
  style: {}
};

Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: PropTypes.any.isRequired
};

export default Image;

独自のImageコンポーネントを使用することにした場所ごとに、それをインポートして次のように使用します。

<Image source={require('assets/images/splashSignInAsset.png')} />

実際、私は自分のsourceコンポーネント内のImagepropをanyとしてチェックしました。

source: PropTypes.any.isRequired

しかし、それは真実ではありません。私はそれを知っている。そこに何を書けばいいのかわからない。ここで確認したrequire関数の戻り値のタイプは何ですか？

javascriptreactjsreact-nativereact-proptypes
4
AmerllicA

実際、私はanyの使用を拒否しています。良い答えはnodeです。

Imageコンポーネント内にrequire('assets/images/splashSignInAsset.png')関数を挿入するときは、次のようにnodeプロパティタイプを確認する必要があります。

Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: PropTypes.node.isRequired
};

しかし、正しい答えは、sourceにReact Nativeコンポーネントの小道具タイプを使用することだと思います。

import { Image as ImageNative } from 'react-native';
...
Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: ImageNative.propTypes.source.isRequired
};

更新：

また、正確な答えはreact-nativeソースコードでsource propタイプを使用しているため、最良の答えは次のコードのようになります。

source: PropTypes.oneOfType([
  PropTypes.shape({
    uri: PropTypes.string,
    headers: PropTypes.objectOf(PropTypes.string)
  }),
  PropTypes.number,
  PropTypes.arrayOf(
    PropTypes.shape({
      uri: PropTypes.string,
      width: PropTypes.number,
      height: PropTypes.number,
      headers: PropTypes.objectOf(PropTypes.string)
    })
  )
])
9
AmerllicA

まず、次のようにImageをインポートします。

import { Image as ImageNative } from 'react-native';

そして、次のようにImage定数を定義します。

const Image = ({ style, source }) => (

コンポーネントに別の名前を適用するか、別の名前でインポートする必要があります。

ここで、クエリに対して、次のようなソースを使用しないでください。

source={require('assets/images/splashSignInAsset.png')}

代わりに、次のようなソースを提供してください。

source={'splashSignInAsset.png'}

また、コンポーネントで、requireとpathを適用します。また、stringまたはcustomPropを使用してcheckと入力すると、png、jpgなどの拡張子をテストできます。

const imgSource = `assets/images/${source}`;
<ImportedImageName source={require(imgSource)} style={style} />

YourImageComponent.propTypes = {
   source: PropTypes.string.isRequired
}

または、カスタム小道具：

source: function(props, propName, componentName) {
    if (!/.(jpg|jpeg|png|gif)$/i.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
0
Bhojendra Rauniyar