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

Question

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

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

Answer 1

我没有完全理解这个问题。但我要尝试这个。

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

您可以将要呈现的行类型作为 prop 传递给通用 Row 组件并呈现它。

所以你的第二个代码 fragment 应该是这样的 -

_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 将包含您要呈现的特定组件。

Row 的

render:

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