fetch
参考地址
http://reactnative.cn/docs/0.51/network.html
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
自己的例子
loadData=()=>{
fetch( `https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
.then((response) => response.json())
.then(responseJson=>{
let data = responseJson.items;
let dataBlob = [];
let i = 0;
//放入 datablob 里面
data.map((item,i)=>{
dataBlob.push({
key: i,
value: item,
});
});
this.setState({
//复制数据源
dataList: dataBlob,
isLoading:false
});
data = null;
dataBlob = null;
})
.catch((error)=>{
console.error(error);
}).done();
}
FlatList
参考地址
http://reactnative.cn/docs/0.50/flatlist.html#content
<FlatList
data={this.state.dataList}
renderItem={this.renderItemView}
>
</FlatList>
/**
* 返回 flatList 里面的字布局
* @param item
* @returns {XML}
*/
renderItemView({item}) {
return (
<ProjectRow item={item}/>
);
}
整体js
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
FlatList,
ListView,
ActivityIndicator,
RefreshControl
} from 'react-native';
import NavigationBar from "../component/NavigationBar"
import ProjectRow from "../component/ProjectRow"
import ScrollableTabView from "react-native-scrollable-tab-view"
//"最热"是包含在,HomePage页面
//"最热"页面包含,NavigationBar
export default class PopularPage extends Component{
constructor(props){
super(props);
this.state={
languages:["Android","IOS","Java","React","JS"]
}
}
render(){
return <View style={styles.container}>
<NavigationBar/>
<ScrollableTabView
tabBarBackgroundColor="#63B8FF"
tabBarActiveTextColor="#FFF"
tabBarInactiveTextColor="#F5FFFA"
tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
{
this.state.languages.map((item,i)=>{
return <PopularTab key={`item${i}`} tabLabel={item}></PopularTab>
})
}
</ScrollableTabView>
</View>;
}
}
class PopularTab extends Component{
static defaultProps={
tabLabel:"Android"
}
constructor(props){
super(props)
this.state={
dataList:[],
isLoading: true,
}
}
loadData=()=>{
fetch( `https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=stars`)
.then((response) => response.json())
.then(responseJson=>{
let data = responseJson.items;
let dataBlob = [];
let i = 0;
//放入 datablob 里面
data.map((item,i)=>{
dataBlob.push({
key: i,
value: item,
});
});
this.setState({
//复制数据源
dataList: dataBlob,
isLoading:false
});
data = null;
dataBlob = null;
})
.catch((error)=>{
console.error(error);
}).done();
}
componentDidMount =()=>{
this.loadData()
}
render(){
if(this.state.isLoading){
return this.renderLoadingView();
}else{
return this.renderData();
}
}
/**
* 获取数据成功后显示
* @returns {XML}
* onRefresh={this.handleRefresh()}
*/
renderData(){
return(
<View style={styles.container}>
{
<FlatList
data={this.state.dataList}
renderItem={this.renderItemView}
>
</FlatList>
}
</View>
)
}
/**
* 返回 flatList 里面的字布局
* @param item
* @returns {XML}
*/
renderItemView({item}) {
return (
<ProjectRow item={item}/>
);
}
handleRefresh=()=>{
this.loadData();
}
//加载等待的view
renderLoadingView() {
return (
<View style={styles.container}>
<ActivityIndicator
animating={this.state.isLoading?true:false}
style={[styles.gray, {height: 80}]}
color='red'
size="large"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
title: {
fontSize: 15,
color: 'blue',
},
content: {
fontSize: 15,
color: 'black',
}
});
网友评论