Przepływ mówiąc: „Wymagany moduł nie znaleziono” dla <Image> źródeł

Question

Mamy istniejącego projektu React Native (wersja 0.22.2) i próbuję skonfigurować sprawdzanie typu przepływu (wersja 0.23) w sprawie niektórych plików. Jednak Flow daje dużo błędów w rozmowach require() s, których używamy dla źródeł <Image>. Na przykład, mamy ten kod w jednym z naszych komponentów w Header.js:

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

które reagują Native uchwyty w porządku i to działa. Jednak przepływu wydaje się być trudny do leczenia require() jako zwykły moduł wymaga i nie znajdując go, a dając błędy tak:

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

Jak mogę powiedzieć Flow przestać dawać te błędy? Próbowałem dodanie .*/images/.* do sekcji [ignore] z moich .flowconfig, ale to niczego nie zmienia.

Answer 1

Można użyć opcji w .flowconfig module.name_mapper.extension. Na przykład,

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

która będzie mapować dowolną nazwę moduł kończy się .png do modułu ImageSourceStub, jakby zamiast pisać require('./foo.png') trzeba było napisane require('./path/to/root/ImageSourceStub').

W ImageSourceStub.js.flow można zrobić

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

tak, że przepływ wie, że require('*.png') zwraca {uri: string}.

Zobacz także Advanced Configuration docs.

Answer 2

Nie mam prawdziwej odpowiedzi, poza tym, że przepływ w React Native wydaje się dziś naprawdę nieprzyjemny i nie zdziwiłbym się, gdyby przepływ po prostu nie obsługiwał tego użycia, ale chciałbym być całkowicie zaskoczony!

Osobiście, jako obejście, Chciałbym tylko dodać składnik wyższy poziom i ignorować błędy przepływu w tym pliku.

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

Następnie użyj <Picture source="my/path/pic.jpg" /> zamiast.

Answer 3

Gdyby sam problem, dla plików JPG, rozwiązano z tego .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'