Question

如果我的代码中有这个简单的SectionList定义：

const s = (
  <SectionList
    renderItem={({ item }) => <Text>abc</Text>}
    renderSectionHeader={({ section }) => <Text>abc</Text>}
    sections={[{ data: [1, 2, 3], title: 'abc' }]}
  />
);

并且flow生成此错误消息，该消息引用整个“标记块”（实际上是从VSCode复制粘贴）：

[flow] props of React element `SectionList` (This type is incompatible with See also: React element `SectionList`)

这里发生了什么？

编辑我正在使用

flow-bin: 0.56.0
react: 16.0.0
react-native: 0.49.1

EDIT2 因此，示例可以简化为这个简单的行（不会影响错误消息）：

<SectionList sections={[]} />;

EDIT3 我刚刚发现流抱怨React Native库中定义的几种类型（主要是关于泛型类型的缺失类型参数）。我想知道我是否应该使用旧的流量版本。是否有React Native和flow的兼容性表？

Answer 1

React为名为SectionBase的部分内置了Flow类型：

import type { SectionBase } from 'react-native/Libraries/Lists/SectionList'
type Section = SectionBase<DataType>

所以根据马丁的回答，你会写：SectionBase<Row>

Answer 2

react-native: 0.49.3和flow-bin: 0.53.0出现类似问题。检查SectionList源中的类型定义后，让它在没有类型警告的情况下工作，如下所示：

type Row = {
  name: string,
}

type Section = {
  title: string,
  data: $ReadOnlyArray<Row>,
}

const mySections: $ReadOnlyArray<Section> = [...] // your data here

<SectionList sections={mySections} />

所以我的关键是使用$ReadOnlyArray<T>代替Array<T>。也许这对你有帮助！

Answer 3

OP的代码应该是有效的，应该不会受到Flow的投诉。

我遇到一个相关的问题，因为我使用的状态是保存部分，而我找不到适合Flow的类型。我无法直接使用SectionBase，因为它没有我需要的额外title属性。我通过使用交叉点类型解决了此问题：

type Section = { title: string } & SectionBase<ScheduleChange>
type State { sections: Section[] }

...

<SectionList
    sections = this.state.sections
    ...
/>

React Native SectionList具有难以理解的流类型错误

3 个答案: