Поток «Требуемый модуль не найден» для <Image> источников

Question

У нас есть существующий проект React Native (версия 0.22.2), и я пытаюсь настроить средство проверки потока (версия 0.23) на определенные файлы. Тем не менее, поток дает много ошибок для звонков require(), которые мы используем для <Image> источников. Например, у нас есть этот код в одном из наших компонентов в Header.js:

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

, которые при реагировании Родные ручки хорошо, и это работает. Тем не менее, поток, кажется, пытается лечить require(), как требуется регулярный модуль и не найдя его, и дает ошибки, как это:

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

Как я могу сказать, поток прекратить давать эти ошибки? Я пробовал добавить .*/images/.* в раздел [ignore] моего .flowconfig, но это ничего не меняет.

Answer 1

Вы можете использовать опцию module.name_mapper.extension в .flowconfig. Например,

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

, который будет отображать любое имя модуля, оканчивающиеся на .png к ImageSourceStub модуля, как если бы вместо того, чтобы писать require('./foo.png') вы написали require('./path/to/root/ImageSourceStub').

В ImageSourceStub.js.flow вы можете сделать

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

так, что поток знает, что require('*.png') возвращает {uri: string}.

См. Также документы Advanced Configuration.

Answer 2

У меня нет реального ответа, кроме того, чтобы сказать, что поток в React Native кажется действительно изворотливым сегодня, и это не удивит меня, если поток просто не поддерживает это использование вообще, но я бы хотел полностью удивлен!

Лично я работаю над тем, чтобы добавить компонент более высокого уровня и игнорировать ошибки потока в этом файле.

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

Затем используйте вместо этого <Picture source="my/path/pic.jpg" />.

Answer 3

Если бы тот же вопрос, для JPG-файлов, решить эту .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'