React Native list View
import React, { Component } from 'react';
import {
Button,
StyleSheet,
Text,
images,
ListView,
ActivityIndicator,
View,
} from 'react-native';
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
isLoding: false,
};
}
componentDidMount() {
fetch("http://localhost:53554/api/TaskApi/GetTasks?username=kathiravalan421")
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data),
loaded: true,
});
})
}
render() {
if (this.state.isLoding) {
<View>
<ActivityIndicator/>
</View>
}
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderTasks}
/>
</View>
);
}
renderTasks(rowData) {
return (
<View style={styles.rightContainer}>
<Text>
ProductReferenceId { rowData.ProductReferenceId }
ProductName { rowData.ProductName }
ProductWeight {rowData.ProductWeight}
Amount {rowData.Amount}
OrderDate {rowData.OrderDate}
</Text>
<Text>
Address: {rowData.Address1}{rowData.Address2}
City: {rowData.City} State: {rowData.State} Country: {rowData.Country} ZipCode: {rowData.ZipCode}
</Text>
<Button
title="Assign"
color="#5E4FA2"
style={{ height: 2, width: 10 }}
accessibilityLabel="Assign"
/>
</View>
)
}
}
const styles = StyleSheet.create({
counter: {
padding: 30,
alignSelf: 'center',
fontSize: 26,
fontWeight: 'bold',
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
import {
Button,
StyleSheet,
Text,
images,
ListView,
ActivityIndicator,
View,
} from 'react-native';
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
isLoding: false,
};
}
componentDidMount() {
fetch("http://localhost:53554/api/TaskApi/GetTasks?username=kathiravalan421")
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data),
loaded: true,
});
})
}
render() {
if (this.state.isLoding) {
<View>
<ActivityIndicator/>
</View>
}
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderTasks}
/>
</View>
);
}
renderTasks(rowData) {
return (
<View style={styles.rightContainer}>
<Text>
ProductReferenceId { rowData.ProductReferenceId }
ProductName { rowData.ProductName }
ProductWeight {rowData.ProductWeight}
Amount {rowData.Amount}
OrderDate {rowData.OrderDate}
</Text>
<Text>
Address: {rowData.Address1}{rowData.Address2}
City: {rowData.City} State: {rowData.State} Country: {rowData.Country} ZipCode: {rowData.ZipCode}
</Text>
<Button
title="Assign"
color="#5E4FA2"
style={{ height: 2, width: 10 }}
accessibilityLabel="Assign"
/>
</View>
)
}
}
const styles = StyleSheet.create({
counter: {
padding: 30,
alignSelf: 'center',
fontSize: 26,
fontWeight: 'bold',
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
Comments
Post a Comment