开发一个基于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',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–源码