Свойство источника данных не распространяется от реагента к методу рендеринга компонента React Native ListView.

Question

Я пытаюсь отобразить React Native ListView в реагенте.

У меня есть следующий фрагмент кода:

(def data-source 
(React.ListView.DataSource. #js{:rowHasChanged (fn [a b] false)})) 

(defn render-row [] 
    [ui/view]) 

(def rows 
    (clj->js ["whoa", "hey"])) 

(defn main-scene [] 
    (fn [] 
    [ui/list-view {:render-row render-row 
        :data-source (.cloneWithRows data-source rows)}])) 

Вышеприведенные приводит к «Failed propType:. Обязательный реквизит dataSource не был указан в ListView Проверьте рендер метод app.ios.ui.main_scene.» За ним следует «Невозможно прочитать свойство» rowIdentities «undefined», поскольку источник данных не определен внутри метода рендеринга ListView.

Мое первое предположение заключалось в особой трактовке атрибутов «data-» где-то внутри внутренних или реагентных или икота или что-то в этом роде, но я не мог найти ни малейшего понятия, почему свойство не распространяется должным образом.

И, yep, (.cloneWithRows data-source rows) фактически возвращает действительный экземпляр объекта ListViewDataSource.

И потом, если я прохожу :data-source, как :dataSource все, что я получаю загадочное «StaticRenderer.render():. Действительное ReactComponent должны быть возвращены Вам, возможно, вернулся неопределенными, массив или какой-либо другой неверный объект.»

Я использую react-native 0.18.1 и reagent 0.5.1 с re-frame 0.6.0. Я проверил это с reagent 0.6.0-alpha и re-frame 0.7.0-alpha и получил те же ошибки.

Я копал это в течение нескольких часов, и я думаю, мне нужна помощь. Любые подсказки/идеи, чтобы попытаться исправить это, любые ссылки в коде, на который нужно смотреть? Спасибо за тонну заранее.

Answer 1

Ну, первое, что источник данных должен быть передан в виде как :dataSource, а не как :data-source. Последний по какой-то причине не работает. В качестве побочного примечания метод строки рендеринга может быть передан как :render-row или :renderRow, и он работает в обоих направлениях. Хех.

Во-вторых, функция render-row должна возвращать компонент React, а не массив. Последнее было бы хорошо, если бы массив позже был обработан реагентом, но listview не выполняет какую-либо пост-обработку данных, которые он получает из строки рендеринга, и просто пытается вернуть это для Реагирования, которое освобождается, если это простой clojure массив.

Так выше render-row функция должна быть записана в виде:

(defn render-row [] 
    (r/as-element [ui/view])) 

И тогда все работает отлично. :)