7

したがって、私たちが望むのは次のようなものです。

複数行タイプ

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-defects が発生します。

ui-欠陥

4

1 に答える 1

3

私は質問を完全には理解していませんでした。しかし、私はこれを試みるつもりです。

複数のタイプの行をレンダリングする代わりに、同じ Row コンポーネントをレンダリングできますが、内部のコンテンツは異なります。さまざまな種類の行を管理してレンダリングするのは難しいでしょう。

Rowレンダリングする行のタイプを prop として共通コンポーネントに渡して、レンダリングさせることができます。

したがって、2 番目のコード スニペットは次のようになります。

_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提供された行を単純に構築し、コンポーネントを返します。したがって、最上位には s しかありませRowん。Rowレンダリングする特定のコンポーネントが含まれます。

renderのRow:

render() {
  const Component = this.props.component
  return <Component {...this.props.data} />;
}
于 2016-09-15T09:32:21.150 に答える