android - 在本地 react ListView 上显示多种类型的行的正确方法是什么？

所以我们想要的是这样的:

multiple-row-type

在iOS中，我们可以为每种单元格类型使用多个cellIdentifier来创建性能 ListView 。

我现在所拥有的就像

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-defects

最佳答案

我没有完全理解这个问题。但是我要尝试这个。
您可以呈现相同的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将仅构造提供的行并返回组件。因此，在顶层，您只有Row。 Row将包含您要呈现的特定组件。render的Row:

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