React Native SectionList имеет непонятную ошибку типа потока

Если в моем коде есть это простое определение SectionList:

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

И поток генерирует это сообщение об ошибке, которое относится ко всему «блоку тегов» (на самом деле это копия, вставленная из 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 и потока?


react-native list flowtype
person Bastian    schedule 05.10.2017    source источник
comment
Какую версию react-native вы используете? Код react-native содержит аннотации Flow, так что вы можете точно увидеть, что он ожидает, взглянув на код SectionList: github.com/facebook/react-native/blob/   -  person Ross Allen    schedule 05.10.2017
comment
Да... ну, я до сих пор понятия не имею. Однако я добавил номера версий библиотек.   -  person Bastian    schedule 05.10.2017
comment
Ветвь react-native со стабильной версией 0.49 использует ^0.53.0 в качестве версии зависимости от потоковой корзины. Попробуйте вернуться к версии 0.53.0. github.com/facebook/react-native/blob/0.49- стабильный/package.json   -  person Ross Allen    schedule 06.10.2017
comment
Пробовал, сообщение об ошибке все равно появляется. Тем не менее, приложение работает безупречно. Таким образом, я буду игнорировать это сообщение об ошибке впредь.   -  person Bastian    schedule 09.10.2017

Ответы (3)


arrow_upward
3
arrow_downward

У меня была аналогичная проблема с 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>. Возможно, это поможет вам!

person Martin    schedule 20.10.2017
comment
Это ничего не меняет для меня. - person Bastian; 30.10.2017

arrow_upward
3
arrow_downward

React имеет встроенный тип Flow для разделов с именем SectionBase:

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

Итак, основываясь на том, что ответил Мартин, вы бы написали: SectionBase<Row>

person Johannes    schedule 19.01.2018

arrow_upward
1
arrow_downward

Код OP не должен был вызвать жалоб со стороны Flow, поскольку он действителен.

У меня была связанная с этим проблема: я использовал состояние, содержащее разделы, и не мог найти правильный тип для Flow. Я не мог использовать SectionBase напрямую, так как у него не было нужного мне дополнительного свойства title. Я решил это, используя тип пересечения:

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

...

<SectionList
    sections = this.state.sections
    ...
/>
person phatmann    schedule 06.11.2018