react listview组件(通讯录附带分组)

constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,sectionHeaderHasChanged : (s1, s2) => s1 !== s2});
this.state = {
dataSource: ds.cloneWithRowsAndSections(’’),
isLoading: true
}
this.onLoad()
}
renderSectionHeader(sectionData, sectionID){
return(
<Text style={{backgroundColor:’#f6f6f6’,height:40,lineHeight:40,paddingLeft:24,fontSize:15,fontWeight:‘bold’}}>{sectionID}
);
}
getJsonData = async(reload = true) => {//数据获取
const response = await fetch(url, {
method: ‘POST’,
headers: {
Accept: ‘application/json’,
‘Content-Type’: ‘application/x-www-form-urlencoded’,
},
credentials: ‘include’,
body: qs.stringify(param1),
});
const result = await response.json();
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged : (s1, s2) => s1 !== s2
});
let arr={};
result.data.map((item, index) => {//数据处理
arr[item.name]=item.employees
});
this.setState({dataSource:ds.cloneWithRowsAndSections(arr)})//数据保存到state
}
componentDidMount() {
this.getJsonData();
}
renderRow(rowData,sectionID,rowID) {
return

{rowData.name}
{rowData.position}
{rowData.mobile1}



}

renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    return <View  style={styles.line}></View>
}

// 刷新的状态,时间2s
onLoad() {
    setTimeout(() => {
        this.setState({
            isLoading: false
        })
    }, 2000)
}
render() {
    return (
        <View style={styles.container}>
		  <View style={{height:55,backgroundColor:"#098ca3"}}>
		   <Text style={styles.ImgText}>通讯录</Text>    
		   </View>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData,sectionID,rowID) => this.renderRow(rowData,sectionID,rowID)}
				renderSectionHeader={(sectionData,sectionID) => this.renderSectionHeader(sectionData,sectionID)}
                renderSeparator={(sectionID, rowID, adjacentRowHighlighted) =>
                    this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)
                }
                // 下拉刷新,要用到RefreshControl,需要导入
                refreshControl={
                    <RefreshControl refreshing={this.state.isLoading} onRefresh={() => this.onLoad()}/>
                }
            />
        </View>
    );
}

//fecth 跨域获取数据
返回的result是Promise 对象
await fetch(url, {
method: ‘POST’,
headers: {
Accept: ‘application/json’,
‘Content-Type’: ‘application/x-www-form-urlencoded’,
},
credentials: ‘include’,
body: qs.stringify(param1),
});
const result = await response.json();
想要获取Promise 对象中[[promisevalue]],
在componentDidMount中fetch 返回json 并且 setState()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值