1

これは、属性SwipeListViewに基づいて 2 つ以上の異なる種類の行をレンダリングできるはずです。notification

  • true通知用です
  • falseはレギュラー商品です

2 つのタイプの行がまったく異なると仮定します。私が解決しようとしている問題は、標準ではなく、行を左右にスワイプできるSwipeListViewand要素を使用して、そのようなリストをレンダリングする方法です。SwipeRowListView

私は常に、戻り値を取ることを拒否するメソッドに問題をrenderRow()抱えています。renderHiddenRow()renderRow(data, secId, rowId, rowMap)

SwipeListView ドキ​​ュメント

例のアプリ:

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 はオブジェクトではありません (「Component.type」を評価しています)

最も一般的なエラー

4

1 に答える 1

1

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

于 2016-07-19T14:28:19.453 に答える