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

最新推荐文章于 2023-08-19 10:40:02 发布

J_小浩子

最新推荐文章于 2023-08-19 10:40:02 发布

阅读量1k

点赞数

分类专栏： react-native 文章标签： react-native 网络 ListView

本文链接：https://blog.csdn.net/change_on/article/details/78739135

版权

本文介绍了如何使用React Native进行网络请求，通过fetch获取数据并利用state保存。接着，详细讲解了如何将数据展示在ListView中，同时解决ListView与Swiper滑动冲突的问题。在组件挂载后加载ListView数据，确保Swiper正常工作。

摘要由CSDN通过智能技术生成

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);
    });

  };