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

最新推荐文章于 2021-03-25 11:52:06 发布

原创最新推荐文章于 2021-03-25 11:52:06 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #网络 #ListView

react-native 专栏收录该内容

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}