1
嘿，所有人都会喜欢这个问题的一些帮助..我一直在撕掉我的头发！React-Native ListView与Object Array
我尝试使用以下格式的对象数组来呈现一个ListView：我使用的成分反应母语碰擦列表视图发现这里
Array[number]
0: Object
category: ''
date: ''
total: ''
vendor: ''
1: Object ..etc.
但我只渲染了我的数组对象的最后一个元素！我也在这个反应原生应用程序中使用了redux，尽管我没有看到这个效果。 帮助！ :)
输出如下 
这里是我当前的代码。
import React, {
Component,
} from 'react';
import {
ListView,
Text,
TouchableOpacity,
TouchableHighlight,
View,
Alert
} from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import { SwipeListView } from 'react-native-swipe-list-view';
import {
PRIMARY_HIGHLIGHT_COLOUR,
CARD_BACKGROUND_COLOUR,
BORDER_COLOUR
} from '../global/colours';
import {
MySearchBar,
Button,
FAB,
BackgroundView,
} from '../components';
import { HEADER } from '../global/margins';
class ReceiptsListView extends Component {
constructor(props) {
super(props);
console.log(this.props.receiptList);
this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
listViewData: this.ds.cloneWithRows(this.props.receiptList)
};
console.log('state', this.state);
}
/* shouldComponentUpdate(nextProps) {
if (this.props !== nextProps) {
return true;
}
return false;
} */
deleteRow(secId, rowId, rowMap) {
// rowMap[`${secId}${rowId}`].closeRow();
//console.log('delete', secId, rowId, rowMap);
// const newData = [...this.state.listViewData];
// newData.splice(rowId, 1);
// this.setState({ listViewData: newData });
}
render() {
//const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
//const dataSource = ds.cloneWithRows(receiptlist);
//this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
return (
<BackgroundView style={styles.container}>
<View style={styles.search}>
<MySearchBar />
<Button style={styles.button}> Export </Button>
</View>
<SwipeListView
dataSource={this.state.listViewData}
renderRow={(data) => this.renderRow(data)}
renderHiddenRow={(secId, rowId, rowMap) => this.renderHiddenRow(secId, rowId, rowMap)}
rightOpenValue={-150}
recalculateHiddenLayout
previewFirstRow
/>
<FAB
onPress={this.onPressFAB}
/>
</BackgroundView>
);
}
renderRow(data) {
console.log('data', data);
return (
<TouchableHighlight
onPress={console.log('You touched me')}
style={styles.rowFront}
underlayColor={'#AAA'}
>
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
<Text> {`${data.vendor}`} </Text>
<Text> {`${data.total}`} </Text>
</View>
<View>
<Text> {`${data.date}`} </Text>
<Text> {`${data.category}`} </Text>
</View>
</View>
</TouchableHighlight>
);
}
renderHiddenRow(secId, rowId, rowMap) {
return (
<View style={styles.rowBack}>
<TouchableOpacity
style={[styles.backRightBtn, styles.backRightBtnLeft]}
onPress={_ => (console.log(secId, rowId, rowMap))}
>
<Text style={styles.backTextWhite}>Export</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.backRightBtn, styles.backRightBtnRight]}
onPress={_ => (console.log(secId, rowId, rowMap))}
>
<Text style={styles.backTextWhite}>Delete</Text>
</TouchableOpacity>
</View>
);
}
onPressFAB() {
console.log('FAB pressed');
Alert.alert(
'Choose Photo Source',
null,
[
{ text: 'Camera', onPress:() => Actions.camera() },
{ text: 'Photo Library', onPress:() => Actions.photos() },
{ text: 'Cancel', onPress:() => console.log('cancel'), style: 'cancel' }
]
);
}
}
const styles = {
search: {
flexDirection: 'row',
padding: 10,
height: 60,
backgroundColor: PRIMARY_HIGHLIGHT_COLOUR
},
button: {
marginTop: 0,
height: 30,
flexGrow: 0.3
},
container: {
padding: 0,
paddingTop: HEADER.height
},
rowFront: {
//alignItems: 'center',
flex: 1,
padding: 10,
backgroundColor: CARD_BACKGROUND_COLOUR,
borderBottomColor: BORDER_COLOUR,
borderBottomWidth: 1,
justifyContent: 'center',
//height: 100,
},
rowBack: {
alignItems: 'center',
backgroundColor: '#DDD',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
backRightBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
width: 75
},
backRightBtnLeft: {
backgroundColor: 'blue',
right: 75
},
backRightBtnRight: {
backgroundColor: 'red',
right: 0
},
controls: {
alignItems: 'center',
marginBottom: 30
},
switchContainer: {
flexDirection: 'row',
justifyContent: 'center',
marginBottom: 5
},
switch: {
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
paddingVertical: 10,
width: 100,
}
};
const mapStateToProps = ({ receipts, accounts }) => {
const {
myReceipts,
receiptList
} = receipts;
const {
labelsArray
} = accounts;
return {
myReceipts,
receiptList,
labelsArray
};
};
export default connect(mapStateToProps, {
})(ReceiptsListView);
您是如何解决问题的？我有类似的，你会介意回答你自己的问题吗？ – milkersarac
我的第一个建议是使用同一个库中提供的''组件，并使用内建的'ListView'，看看它是否适合你。 –
此外，为什么这是downvoted。这是显示所有代码的问题。不妨删除整件事，让其他人都可以从中受益，这要归功于一些帮助。如果您想复制它，将明天删除Enie –