RN FlatList
6904 ワード
RNリストの開発、RNは3.0であるべきです
注意バージョン
注意バージョン
/**
* Created by blocknew on 2019/10/15.
*/
/* jshint esversion: 6 */
import React, {Component} from 'react';
import {
StyleSheet,
View,
Alert,
Button,
Text,
ToastAndroid,
Touchable,
TouchableWithoutFeedback,
TouchableOpacity,
FlatList,
Image,
RefreshControl,
Platform,
} from 'react-native';
export default class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 1,
isLoading: true,
error: false,
errorInfo: '',
dataArray: [],
showFoot: 0,
isRefreshing: false,
};
}
componentDidMount() {
this.fetchData();
}
shouldComponentUpdate() {
return true;
}
fetchData() {
console.log(' ')// , json
var url = 'xxx'
fetch(url, {
method: 'POST',
body: {
page: 1,
}
}).then((response) => response.json())
.then((responseData) => {
console.log(' ');
var datalist = [];
// console.log(responseData);
// console.log(responseData.result);
var res = JSON.parse(responseData.result);
datalist = res.data;
console.log(this.state.dataArray.concat(datalist));
this.setState({
isLoading: false,
isRefreshing: false,
dataArray: this.state.dataArray.concat(datalist)
});
this.setState({
isRefreshing: false,
});
}).catch((error) => {
console.log(error);
}).done();
}
render() {
const navigate = this.props.navigation;
var pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
{/* */}
this.createListItem(item)}
ListEmptyComponent={this.createEmptyView()}
ListHeaderComponent={this.createListHeader()}
ListFooterComponent={this.createListFooter()}
ItemSeparatorComponent={this.createSeparator}
refreshControl={
this.onRefresh()}/>
}
onEndReached={() => this.onLoadMore()}
/>
)
}
createListItem(item) {
return (
this.clickItem(item)}>
{item.demand}
{item.customer.name}
{item.customer.city}
)
}
//
createSeparator() {
return
}
//
createListHeader() {
return (
)
}
//
createListFooter() {
return (
)
}
//
createEmptyView() {
return (
)
}
onRefresh() {
Alert.alert(' ')
this.setState({
page: 1,
isRefreshing: true,
dataArray: []
});
this.fetchData()
}
onLoadMore() {
console.log(' ');
}
clickItem(item) {
Alert.alert(item.demand)
// Actions.news({'url':'http://www.baidu.com'})
}
}
const touchLeft = () => {
Alert.alert(' ');
};
const touchRight = () => {
// ToastAndroid.show(' ',ToastAndroid.SHORT);
Alert.alert(' ');
}
const styles = StyleSheet.create({
bac: {
backgroundColor: '#fff',
flex: 1,
},
titleLine1: {
marginTop: 0,
height: 1,
backgroundColor: '#dcdcdc',
},
titleview: {
backgroundColor: '#f5f5f9',
height: 50,
marginTop: 0,
flexDirection: 'row',
},
leftitle: {
backgroundColor: '#f5f5f9',
height: 50,
lineHeight: 50,
textAlign: 'center',
flex: 1,
fontSize: 16,
alignItems: 'center',
color: 'black',
},
midline: {
marginTop: 10,
height: 30,
width: 1,
backgroundColor: '#ccc',
},
righttitle: {
backgroundColor: '#f5f5f9',
height: 50,
lineHeight: 50,
textAlign: 'center',
fontSize: 16,
flex: 1,
alignItems: 'center',
color: 'black',
},
cotentview: {
backgroundColor: '#fff',
flex: 1,
marginBottom: 0,
},
icon: {
width: 60,
height: 60,
},
itemstyle: {
backgroundColor: '#fff',
flexDirection: 'row',
height: 120,
flex: 1,
},
})