开发一个基于React Native的简易demo--读取网络数据并展示

react-native的网络请求用fetch，及其简单，请求到的数据保存起来，react-native用state来保存数据，类似于Java的request，还可以传递给另一个类，所以就是：请求数据，赋值。展示数据这里用ListView，有点类似于Java的HashMap，要求唯一的key，一个key代表一条数据。

定义一个方法，接收fetch的数据，并赋值给state中的dataSource：

buttonTap=()=>{

fetch( 'http://bbs.reactnative.cn/api/category/3'
).then((response)=>response.json())
.then((jsondata) =>{
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

this.setState({dataSource: ds.cloneWithRows(jsondata.topics)});
this.setState({title:jsondata.description});
//alert(jsondata);
})
.catch((error)=>{
alert(error);
console.warning(error);
});

};

由于ListView会跟Swiper有滑动冲突，所以，在用ListView渲染数据时，要做个判断componentDidMount()，等ListView数据加载完，再启用Swiper：

class RecentChatsScreen extends React.Component {

// render() {
//  return (
//      <View style={[styles.containerSwiper]}>
//         <View style={{flexDirection:'column',justifyContent:'center',flex:1,alignItems:'center'}}>
//             <Text style={{color:'#fff',fontSize: 14,textAlign:'center'}}>当前尚未登录</Text>
//             <Text style={{color:'#fff',fontSize: 14,textAlign:'center'}}>请点击界面登录</Text>
//         </View>
//     </View>
//  );
// }

// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
swiperShow:false,
dataSource: ds.cloneWithRows([
// 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
this.buttonTap();//初始化
}

componentDidMount(){
setTimeout(()=>{
this.setState({
swiperShow:true
});
},0)
}

buttonTap=()=>{

fetch( 'http://bbs.reactnative.cn/api/category/3'
).then((response)=>response.json())
.then((jsondata) =>{
console.log(jsondata);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

this.setState({dataSource: ds.cloneWithRows(jsondata.topics)});
this.setState({title:jsondata.description});
//alert(jsondata);
})
.catch((error)=>{
alert(error);
console.warning(error);
});

};
render() {
if(this.state.swiperShow){
return(
<View style={[styles.containerSwiper]}>
<ListView style={{flex:8} }
removeClippedSubviews={false}
dataSource={this.state.dataSource}
renderRow={(rowData) => <CELL title={rowData.title} detailTitle={rowData.timestampISO}></CELL>}
enableEmptySections={true}
/>
</View>
)
}else {
return (
<View style={{height:100}}>

</View>
);
}
}

}

下一篇：开发一个基于React Native的简易demo–源码