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

Answer 1

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

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

您可以将要渲染的行类型作为道具传递给公共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} />;
}

在反应原生列表视图上显示多种类型行的正确方法是什么？

1 个答案: