Flow 表示 "Required module not found" 用于 <Image> 个来源

Question

我们有一个现有的 React Native 项目（版本 0.22.2），我正在尝试在某些文件上设置 Flow 类型检查器（版本 0.23）。但是，对于我们用于 <Image> 源的 require()s 调用，Flow 给出了很多错误。例如，我们在 Header.js:

中的一个组件中有此代码

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

React Native 处理得很好并且可以正常工作。但是，Flow 似乎试图将 require() 视为常规模块要求但未找到它，并给出如下错误：

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

我怎样才能告诉 Flow 停止给出这些错误？我已经尝试将 .*/images/.* 添加到 .flowconfig 的 [ignore] 部分，但这并没有改变任何东西。

Answer 1

除了说 React Native 中的 flow 现在看起来真的很狡猾之外，我没有真正的答案，如果 flow 根本不支持这种用法，我也不会感到惊讶，但我很乐意完全惊讶！

就个人而言，作为一种变通方法，我只是添加一个更高级别的组件并忽略该文件中的流程错误。

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

那就用<Picture source="my/path/pic.jpg" />代替。

Answer 2

您可以在 .flowconfig 中使用 module.name_mapper.extension 选项。例如，

[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') returns a {uri: string}.

另请参阅 Advanced Configuration 文档。

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'

Flow 表示 "Required module not found" 用于 <Image> 个来源

Flow saying "Required module not found" for <Image> sources

react-native

flowtype