ReactNative http请求绑定ListView的小案例

最近在学习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不熟悉语法，希望有了解的大神多指教