Reagieren Nativ: Render verschiedene Arten von Zeilen in einer SwipeListView

Question

Diese SwipeListView sollte auf das notification Attribut 2 + verschiedene Arten von Zeilen basierend zu machen in der Lage:

• true ist für Benachrichtigungen
• false für regulär Artikel

Angenommen, die beiden Arten von Zeilen sind völlig unterschiedlich. Das Problem, das ich zu lösen versuche, ist, wie man eine solche Liste mit den SwipeListView und SwipeRow Elementen, die Streichen rechts und links, nicht den Standard ListView ermöglicht.

Ich bekomme immer ein Problem mit renderRow() und renderHiddenRow() Methoden, die sich weigern zu nehmen, was renderRow(data, secId, rowId, rowMap) zurückgibt.

SwipeListView documentation

Beispiel App:

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native'; 
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view' 
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ]; 

class SampleApp extends Component { 

    renderRow(data, secId, rowId, rowMap) { 

    var notificationRow = <SwipeRow disableRightSwipe={false} disableLeftSwipe={false} leftOpenValue={100} rightOpenValue={-100}> 
     <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'red'}}> 
      <Text>Accept</Text><Text>Reject</Text> 
     </View> 
     <View> 
      <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'green'}}>Notification</Text> 
     </View> 
    </SwipeRow>; 

    var contentRow = <SwipeRow disableRightSwipe={true} disableLeftSwipe={false} leftOpenValue={100} rightOpenValue={-100}> 
     <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'red'}}> 
      <Text>Edit</Text><Text>Delete</Text> 
     </View> 
     <View> 
      <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'blue'}}>Row item</Text> 
     </View> 
     </SwipeRow>; 

    if (data.notification) { 
     return ({notificationRow}); 
    } else { 
     return ({contentRow}); 
    } 
    } 

    render() { 
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }); 
    return (
     <SwipeListView 
     dataSource={ds.cloneWithRows(data)} 
     renderRow={ (data, secId, rowId, rowMap) => {this.renderRow(data, secId, rowId, rowMap);}} 
     /> 
    ); 
    } 
} 
AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Die häufigsten Fehler:

SwipeListView.js:renderRow:67: undefined is not an object (evaluating 'Component.type')

Answer 1

Es ist wie der fehlende Teil sieht war return in der renderRow() Methode. renderRow={ (data, secId, rowId, rowMap) => {return this.renderRow(data, secId, rowId, rowMap);}}