はネイティブリアクト：この<code>SwipeListView</code>は<code>notification</code>属性に基づい2+行の異なる種類をレンダリングすることができるはず

Question

1 SwipeListView内の行の異なる種類のレンダリング：

• trueは通知
• falseためである定期的なためであります項目

2つのタイプの行が完全に異なるとします。私が解決しようとしている問題は、標準ListViewではなく、左右にスワイプする行を許可するSwipeListViewとSwipeRow要素を使用してそのようなリストをレンダリングする方法です。

renderRow(data, secId, rowId, rowMap)が返すことを拒否する方法は、いつもrenderRow()とrenderHiddenRow()の方法で問題になります。

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

欠けている部分がrenderRow()メソッド内returnだったように見えます。 renderRow={ (data, secId, rowId, rowMap) => {return this.renderRow(data, secId, rowId, rowMap);}}