react-native - 数据源属性不会从试剂传播到 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)}]))

以上导致“失败的 propType:ListView 中未指定必需的 prop dataSource。检查 app.ios.ui.main_scene< 的渲染方法。”紧随其后的是“无法读取未定义的属性‘rowIdentities’”，因为数据源在 ListView 的渲染方法中未定义。

我的第一个猜测是在 reagent/hiccup 或其他什么的内部某处对“数据-”属性进行了一些特殊处理，但我找不到任何线索来说明为什么该属性没有正确传播。

是的，(.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 传递给 View 。后者无论出于何种原因都不起作用。作为旁注，渲染行方法可以作为 :render-row 或 :renderRow 传递，并且它可以两种方式工作。呵呵。

其次，render-row 函数应该返回一个 React 组件而不是一个数组。如果数组稍后由试剂渲染，后者会没问题，但 ListView 不会对它从渲染行获取的数据进行任何类型的后处理，而只是尝试将其返回给 React，如果它是普通的 clojure 数组。

所以上面的render-row函数应该写成:

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

然后一切正常。 :)