React Native：在一个SwipeListView中呈现不同类型的行

此

SwipeListView

应能够基于

通知属性呈现2+种不同的行：


true
用于通知
false
用于常规项目

假设这两种类型的行完全不同。我试图解决的问题是如何使用允许左右滑动行的
SwipeListView
和
SwipeRow
元素（而不是标准的
ListView
）呈现这样的列表

我总是遇到
renderRow（）
和
renderHiddenRow（）
方法的问题，这些方法拒绝接受
renderRow（data、secId、rowId、rowMap）返回的内容


示例应用程序：

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

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，StyleSheet，Text，View，ListView}；
从“react native swipe list view”导入{SwipeListView，SwipeRow}
var data=[{id:0，通知：true，}，{id:1，通知：false，}，{id:2，通知：false，}]；
类SampleApp扩展组件{
renderRow（数据、secId、rowId、rowMap）{
var通知行=
接受拒绝
通知
;
var contentRow=
编辑删除
行项目
;
if（数据通知）{
返回（{notificationRow}）；
}否则{
返回（{contentRow}）；
}
}
render（）{
var ds=new ListView.DataSource（{rowHasChanged:（row1，row2）=>row1！==row2}）；
返回(
{this.renderRow（data，secId，rowId，rowMap）；}
/>
);
}
}
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

最常见的错误：

SwipeListView.js:renderRow:67:undefined不是对象（正在评估）
'组件.类型'）

看起来缺少的部分是
return
在
renderRow（）方法中
renderRow={（data，secId，rowId，rowMap）=>{return this.renderRow（data，secId，rowId，rowMap）；}
FWIW，我相信如果跳过返回值周围的括号，就不必编写
return
，例如
renderRow={（data，secId，rowId，rowMap）=>this.renderRow（data，secId，rowId，rowMap）}）