React Native SectionList 出现无法理解的流类型错误

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因此，该示例可以简化为这一行简单的代码（不影响错误消息）：

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

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

Answer 1

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>. 也许这对你有帮助！