원주민 반작용 : 하나 SwipeListView의 행의 다른 유형을 렌더링

Question

이 SwipeListViewnotification 속성에 따라 행 2+ 다른 종류의 렌더링 할 수 있어야한다 :

• true는
• false 일반위한 알림입니다 항목

두 유형의 행이 완전히 다른 것으로 가정합니다. 내가 해결하려고하는 문제는 표준 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);}}