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

我不是女神ヾ 2022-06-04 07:10 191阅读 0赞

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

![这里写图片描述][SouthEast]

#### **下一篇：[开发一个基于React Native的简易demo–源码][React Native_demo]** ####

[SouthEast]: /images/20220604/b3bc9d4447424044a9aa40221f5c7354.png
[React Native_demo]: http://blog.csdn.net/change_on/article/details/78739361