Реагировать Native: Рендер различных типов строк в одном SwipeListView

Question

Этого SwipeListView должна быть в состоянии оказывать 2+ различные виды рядов на основе notification атрибута:

• true для уведомлений
• false для регулярного пункты

Предположим, что два типа строк совершенно разные. Проблема, которую я пытаюсь решить, заключается в том, как сделать такой список, используя элементы SwipeListView и SwipeRow, которые позволяют прокручивать строки справа и слева, а не стандартные ListView.

У меня всегда возникают проблемы с renderRow() и renderHiddenRow() методами, которые отказываются принимать то, что возвращает renderRow(data, secId, rowId, rowMap).

SwipeListView documentation

Пример приложения:

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

Наиболее распространенная ошибка:

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

Answer 1

Похоже, что недостающую часть была return внутри метода renderRow(). renderRow={ (data, secId, rowId, rowMap) => {return this.renderRow(data, secId, rowId, rowMap);}}