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

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

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

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

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

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

Ответ 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;

чтобы Flow знал, что require('*.png') возвращает a {uri: string}.

См. также Расширенная настройка.

Ответ 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" />.

Ответ 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'