<Image>ソースの「必須モジュールが見つかりません」というメッセージフロー

Question

既存のReact Nativeプロジェクト（バージョン0.22.2）があり、特定のファイルに対してフロータイプチェッカー（バージョン0.23）を設定しようとしています。ただし、<Image>ソースに使用しているrequire()の呼び出しでは、フローに多くのエラーが発生しています。ネイティブが細かい処理し、それが動作リアクト

<Image source={require('./images/nav.png')} style={styles.navIcon} /> 

：たとえば、私たちはHeader.jsにおける当社の構成要素の一つで、このコードを持っています。しかし、流れは通常のモジュールとしてrequire()を治療しようとしているように見える必要が、それを見つけていない、とこのようなエラーを与える：

Header.js:30 
30: <Image source={require('./images/nav.png')} style={styles.navIcon} /> 
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./images/nav.png. Required module not found 

どのように私は、これらのエラーを与えて停止するようにフローを伝えることができますか？私は.flowconfigの[ignore]セクションに.*/images/.*を追加しようとしましたが、何も変わりません。

Answer 1

.flowconfigでmodule.name_mapper.extensionオプションを使用できます。たとえば、代わりにrequire('./foo.png')を書くのあなたはrequire('./path/to/root/ImageSourceStub')を書いたかのように、ImageSourceStubモジュールに.pngで終わる任意のモジュール名をマッピングします

[options] 
module.name_mapper.extension= 'png' -> '<PROJECT_ROOT>/ImageSourceStub.js.flow' 

。

フロー require('*.png')が {uri: string}を返すことを知っているように、あなたは

const stub = { 
    uri: 'stub.png' 
}; 
export default stub; // or module.exports = stub; 

を行うことができますImageSourceStub.js.flowで

。

Advanced Configurationも参照してください。

Answer 2

リアクションネイティブのフローが今日は本当にダーティなように見えるだけでなく、フローが単純にこの使用法をサポートしていないと私は驚きませんが、私は大好きです全く驚いた！

個人的には、回避策として、上位レベルのコンポーネントを追加し、そのファイルのフローエラーを無視するだけです。

// Picture.js 
// (No @flow tag at top of file) 
const Picture = ({ source }) => (
    <Image source={require(source)} /> 
) 

代わりに<Picture source="my/path/pic.jpg" />を使用してください。

Answer 3

この.flowconfig

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 
module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub' 
module.name_mapper='^[./a-zA-Z0-9$_-]+\.jpg$' -> 'RelativeImageStub'