在react-native列表视图上显示多种类型行的正确方法是什么？

Question

所以我们想要的是:

多列型

在iOS中,我们可以为每个单元格类型使用多个cellIdentifier来创建高性能列表视图.

我现在拥有的是什么

render() {
  const dataBlob = [
    { type: "address", data: { address, gotoEditAddress } },

    { type: "deliveryTime", data: {...} },

    { type: "cartSummary", data: {...} },

    ...[items.map(item => {{ type: "item", data: {...} }})],

    { type: "paymentInformation", data: {...} },
    { type: "paymentBreakdown", data: {...} },
    { type: "promoCode", data: {...} },
  ];

  this._dataSource = this._dataSource.cloneWithRows(dataBlob);

  return (
    <ListView ref="ScrollView"
        renderRow={this._renderRow}
        dataSource={this._dataSource} />
  );
)

并在renderRow方法上

_renderRow = (rowData) => {
  const { type, data } = rowData;
  if (type === "address") return <AddressRow {...data} />;
  if (type === "deliveryTime") return <DeliveryTimeRow {...data} />;
  if (type === "menuItem") return <MenuItemRow {...data} />;
  if (type === "cartSummary") return <CartSummaryRow {...data} />;

  if (type === "promoCode") return <PromoCodeRow {...data} />;
  if (type === "paymentInformation") return <PaymentRow {...data} />;
  if (type === "paymentBreakdown") return <PaymentBreakdownRow {...data} />;

  return null;
};

上面代码的问题在于它使dataSource.rowHasChanged方法真正复杂,无法正确实现.

由于某种原因,当我删除一行时,在RN0.31中你会有一些ui缺陷:

UI缺陷

Answer 1

我没有完全理解这个问题。但我打算尝试一下这个。

您可以渲染相同的 Row 组件但内部有不同的内容，而不是渲染多种类型的行。管理和呈现不同类型的行将会很困难。

您可以将要渲染的行类型作为 prop 传递给公共Row组件并进行渲染。

所以你的第二个代码片段看起来像这样 -

_renderRow = (rowData) => {
  const { type, data } = rowData;
  switch(type) {
    case 'address':
      return <Row component={AddressRow} data={...data} />;
    case 'deliveryTime':
      return <Row component={DeliveryTime} data={...data} />;
    default:
      return null;
  }
};

Row将简单地构造提供的行并返回组件。所以在顶层你将只有Rows。Row将包含您想要渲染的特定组件。

render的Row：

render() {
  const Component = this.props.component
  return <Component {...this.props.data} />;
}