360SDN.COM

ReactNative http请求绑定ListView的小案例

来源:  2017-06-18 16:08:19    评论:0点击:

来源:http://blog.csdn.net/chr1123/article/details/52488157
最近在学习ReactNative,把手上正在做的项目里面比较简单的一个页面拿出来试着用RN实现了,分享一下

 

       该页面是一个展示分类列表的页面,将从服务器端请求接口拿到的数据显示出来,实现后的UI如下图:

 

 

 后台获取的json数据格式如下:

    {  
        "result": "1",  
        "data": [  
            {  
                "type": "1",  
                "name": "语种",  
                "child": [  
                    {  
                        "term_id": "0",  
                        "name": "中文"  
                    },  
                    {  
                        "term_id": "0",  
                        "name": "英文"  
                    },  
                    {  
                        "term_id": "0",  
                        "name": "日语"  
                    },   
                    {  
                        "term_id": "0",  
                        "name": "其他语言"  
                    }  
                ]  
            },  
            {  
                "type": "2",  
                "name": "分类",  
                "child": [  
                    {  
                        "term_id": "1",  
                        "name": "小说"  
                    },  
                    {  
                        "term_id": "21",  
                        "name": "商业"  
                    },  
                    {  
                        "term_id": "22",  
                        "name": "科普"  
                    },  
                    {  
                        "term_id": "40",  
                        "name": "其它"  
                    }  
                ]  
            },  
            {  
                "type": "3",  
                "name": "标签",  
                "child": [  
                    {  
                        "term_id": "42",  
                        "name": "幽默"  
                    },  
                    {  
                        "term_id": "43",  
                        "name": "毒舌"  
                    },  
                    {  
                        "term_id": "44",  
                        "name": "人生"  
                    },  
                    {  
                        "term_id": "45",  
                        "name": "小说"  
                    },  
                    {  
                        "term_id": "46",  
                        "name": "情感"  
                    },  
                    {  
                        "term_id": "47",  
                        "name": "智慧"  
                    }  
                ]  
            }  
        ]  
    }

ReactNative 代码如下:    function doHttpGet(listview){  
      fetch('http://接口url地址',{  
        method:'POST',  
        headers:{  
          'Content-Type': 'application/x-www-form-urlencoded',  
        }    
      }).then((response)=>response.json())  
      .then(responseJSON=>{  
          //console.log(responseJSON);  
          listview.setState({dataSource:listview.state.dataSource.cloneWithRows(responseJSON.data),loaded:true});  
      })  
      .catch((error) => {  
           console.error(error);  
         });  
      
    }  
      
    class ListViewTest extends Component{  
        constructor(props){  
          super(props);  
          this.state ={  
              dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),  
              loaded:false  
          };  
      
        }  
        componentDidMount (){  
          setInterval(  
            ()=>{  
              doHttpGet(this);  
            }  
          ,1000);  
        }  
        render(){  
          if (!this.state.loaded) {  
            return <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text>Loading</Text></View>  
          }  
          return(  
            <View style={{flex:1,backgroundColor:'#f0f0f0'}}>  
      
            <ListView dataSource={this.state.dataSource}  
            renderRow={  
              (rowData)=>  
               <View style={{flexDirection:'column',marginTop:15}}>  
                  <Text style={styles.title}>{rowData.name}</Text>  
                  <ListRowView data={rowData}/>  
              </View>  
            } />  
        </View>  
      
          );  
        }  
    }  
      
    class ListRowView extends Component{  
      
      itemClick(termName){  
        alert(termName);  
      }  
      
      render(){  
        var arry = [];  
        for(var i in this.props.data.child){  
      
          if (i%3===0) {  
            if((parseInt(i)+2)===(this.props.data.child.length)){  
              //最后一行只有2条数据  
              var sss = (<View style={styles.flex,{flexDirection:'row',alignItems:'center'}} key={i}>  
                                    <View style={styles.textItem}>  
                                           <Text  style={styles.itemText}  onPress={this.itemClick.bind(this,this.props.data.child[i].name)} >{this.props.data.child[i].name}</Text>  
                                    </View>  
                                    <View style={styles.textItemCenter}>  
                                          <Text  style={styles.itemText}  onPress={this.itemClick.bind(this,this.props.data.child[parseInt(i)+1].name)} >  
                                          {this.props.data.child[parseInt(i)+1].name}</Text>  
                                    </View>  
                                     <View style={styles.textItem}></View>  
                         </View>);  
              arry.push(sss);  
            }else if((parseInt(i)+1)===(this.props.data.child.length)){  
              //最后一行只有有1条条数据  
              var sss = (<View style={styles.flex,{flexDirection:'row',alignItems:'center'}} key={i}>  
              <View style={styles.textItem}>  
                     <Text  style={styles.itemText} onPress={this.itemClick.bind(this,this.props.data.child[i].name)} >{this.props.data.child[i].name}</Text>  
              </View>  
                           <View style={styles.textItemCenter}></View>  
                            <View style={styles.textItem}></View>  
                         </View>);  
              arry.push(sss);  
            }else {  
              var pos1 = this.props.data.child[i].name;  
              var pos2 = this.props.data.child[parseInt(i)+1].name;  
              var pos3 = this.props.data.child[parseInt(i)+2].name;  
      
              var sss = (<View style={styles.flex,{flexDirection:'row',alignItems:'center'}} key={i} >  
              <View style={styles.textItem} >  
                    <Text style={styles.itemText} onPress={this.itemClick.bind(this,pos1)}  >{pos1}</Text>  
              </View>  
              <View style={styles.textItemCenter}>  
                    <Text style={styles.itemText} onPress={this.itemClick.bind(this,pos2)}  >{pos2}</Text>  
              </View>  
              <View style={styles.textItem}>  
                    <Text style={styles.itemText} onPress={this.itemClick.bind(this,pos3)} >{pos3}</Text>  
              </View>  
              </View>);  
              arry.push(sss);  
            }  
          }  
        };  
       return (<View style={{backgroundColor:'#fff',  
       flexDirection:'column',borderTopWidth:1,borderTopColor:'#ccc'}} key={this.props.data.term_id}>{arry}</View>);  
      }  
    }  
      
    const styles = StyleSheet.create({  
      flex:{  
        flex: 1,  
        justifyContent: 'center',  
      },  
      container: {  
        flex: 1,  
        justifyContent: 'center',  
        alignItems: 'center',  
        backgroundColor: '#ccc',  
      },  
      welcome: {  
        fontSize: 20,  
        textAlign: 'center',  
        margin: 10,  
      },  
      instructions: {  
        textAlign: 'center',  
        color: '#333333',  
        marginBottom: 5,  
      },  
    textItem:{  
      flex:1,  
      paddingLeft:15,  
      justifyContent: 'center',  
      height:40,  
      borderBottomWidth:1,  
      borderBottomColor:'#ccc',  
    },  
    itemText:{  
        fontSize:15,  
        color:'#505050',  
    },  
    textItemCenter:{  
      borderLeftWidth:1,  
      borderLeftColor:'#ccc',  
      borderRightWidth:1,  
      borderRightColor:'#ccc',  
      flex:1,  
      height:40,  
      borderBottomWidth:1,  
      borderBottomColor:'#ccc',  
      justifyContent:'center',paddingLeft:15  
    },  
    title:{  
      marginLeft:9,  
      marginBottom:5  
    },   
    });  
      
    AppRegistry.registerComponent('Test', () => ListViewTest);</span> 

每三条数据换行的处理方式一直觉得写的不好,没接触过react不熟悉语法,希望有了解的大神多指教
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权