React Native:在一个 SwipeListView 中呈现不同类型的行
React Native: Render different types of rows in one SwipeListView
这个 SwipeListView
应该能够根据 notification
属性呈现 2 种以上不同类型的行:
true
用于通知
false
用于常规项目
假设两种类型的行完全不同。我要解决的问题是如何使用允许左右滑动行的 SwipeListView
和 SwipeRow
元素呈现这样的列表,而不是标准的 ListView
.
我总是遇到 renderRow()
和 renderHiddenRow()
拒绝接受 renderRow(data, secId, rowId, rowMap)
returns.
方法的问题
示例应用程序:
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')
看起来缺失的部分是 return
在 renderRow()
方法中。 renderRow={ (data, secId, rowId, rowMap) => {return this.renderRow(data, secId, rowId, rowMap);}}
这个 SwipeListView
应该能够根据 notification
属性呈现 2 种以上不同类型的行:
true
用于通知false
用于常规项目
假设两种类型的行完全不同。我要解决的问题是如何使用允许左右滑动行的 SwipeListView
和 SwipeRow
元素呈现这样的列表,而不是标准的 ListView
.
我总是遇到 renderRow()
和 renderHiddenRow()
拒绝接受 renderRow(data, secId, rowId, rowMap)
returns.
示例应用程序:
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')
看起来缺失的部分是 return
在 renderRow()
方法中。 renderRow={ (data, secId, rowId, rowMap) => {return this.renderRow(data, secId, rowId, rowMap);}}