Question

我们有一个现有的React Native项目（版本0.22.2），我正在尝试在某些文件上设置Flow类型检查器（版本0.23）。但是，Flow为我们用于require()来源的<Image>次调用带来了很多错误。例如，我们在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/.*添加到[ignore]的{{1}}部分，但这不会改变任何内容。

Answer 1

您可以使用.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')返回{uri: string}。

另请参阅Advanced Configuration文档。

Answer 2

我没有真正的答案，除了说React Native的流量今天看起来真的很狡猾，如果流程根本不支持这种用法，我也不会感到惊讶，但我＆＃39 ; d爱完全惊讶！

就个人而言，我只是添加更高级别的组件并忽略该文件中的流错误。

// 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'

Flow为<img/>来源说“找不到必需的模块”

3 个答案: