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

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 缺陷，例如：

用户界面缺陷

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将简单地构造提供的行并返回组件。 所以在顶层你将只有Row s。 Row会包含要渲染的特定组件。

Row render ：

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