Wie können mehrere Arten von Zeilen in einer reaktiven nativen Listenansicht angezeigt werden?

Question

Also, was wir wollen, ist so etwas wie:

multiple-row-type

In iOS wir mehrere cellIdentifier für jeden Zelltyp erstellen performant Listenansicht verwenden könnte.

Was ich jetzt habe, ist so etwas wie

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} /> 
); 
) 

und auf der renderRow Methode

_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; 
}; 

Das Problem mit dem obigen Code ist, dass es die dataSource.rowHasChanged Methode ist wirklich machen zu kompliziert richtig implementieren.

und aus irgendeinem Grund, wenn ich eine Zeile entfernt, in RN0.31 Sie einige ui-Defekte als solche haben:

ui-defects

Answer 1

Ich verstehe die Frage nicht in vollem Umfang. Aber ich werde das versuchen.

Statt mehrere Arten von Reihen-Rendering, können Sie die gleiche Reihe Komponente machen, haben aber innerhalb der unterschiedlichen Inhalte. Es wird schwierig sein, verschiedene Arten von Zeilen zu verwalten und zu rendern.

Sie können die den Typ der Zeile, die Sie wollen passieren als Stütze auf eine gemeinsame Komponente machen und haben es gemacht.

So Ihre zweite Codeausschnitt würde wie folgt aussehen -

_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; 
    } 
}; 

würde einfach die mitgelieferte Reihe konstruieren und die Komponente zurück. Also auf der obersten Ebene haben Sie nur s. enthält die bestimmte Komponente, die Sie rendern möchten.

render von :

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