react-native - props - react native prettier

Flujo que dice "Módulo requerido no encontrado" para las fuentes de<Imagen>

Question

Tenemos un proyecto React Native existente (versión 0.22.2) y estoy tratando de configurar el comprobador de tipo de flujo (versión 0.23) en ciertos archivos. Sin embargo, Flow genera muchos errores para las llamadas a require() que estamos usando para las fuentes de <Image> . Por ejemplo, tenemos este código en uno de nuestros componentes en Header.js:

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

Que React Native maneja bien y funciona. Sin embargo, Flow parece tratar de tratar el require() como un módulo regular requiere y no lo encuentra, y da errores como este:

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

¿Cómo puedo decirle a Flow que deje de dar estos errores? He intentado agregar .*/images/.* a la sección [ignore] de mi .flowconfig , pero eso no cambia nada.

Answer 1

No tengo una respuesta real, además de decir que el flujo en React Native parece realmente dudoso hoy y no me sorprendería si el flujo simplemente no admite este uso en absoluto, ¡pero me encantaría estar totalmente sorprendido!

Personalmente, como solución alternativa, solo agregaría un componente de nivel superior e ignoraría los errores de flujo en ese archivo.

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

Luego, use <Picture source="my/path/pic.jpg" /> .

Answer 2

Puede usar la opción module.name_mapper.extension en .flowconfig. Por ejemplo,

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

que asignará cualquier nombre de módulo que termine en .png a un módulo ImageSourceStub , como si en lugar de escribir require(''./foo.png'') hubiera escrito require(''./path/to/root/ImageSourceStub'') .

En ImageSourceStub.js.flow puedes hacer

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

para que Flow sepa que require(''*.png'') devuelve a {uri: string} .

Ver también los documentos de Configuración avanzada .

Answer 3

Tenía el mismo problema, para los archivos JPG, resuelto con este .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''