reactNative 商品分类效果

先看效果图(记录一下视频转gif的网站http://www.gif5.net/)

相信很多商城类的项目都会有这个效果，说下主要思路，大家也可以自己写，左边是一个flatList，右边是一个sectionList，当我们点击左边某个商品分类的时候就去请求右边的接口数据，就这么简单。

整体帖代码，如果请求接口不能用了的话，就得找其他免费api了。

import React,{Component} from 'react';
import {
	View,Text,Image,FlatList,StyleSheet,Dimensions,SectionList,TouchableOpacity,ActivityIndicator,TouchableNativeFeedback
} from 'react-native';

const URL_LEFT = "http://test.hubangyoushang.com/mobile/index.php?act=goods_class&op=index";

const {width} = Dimensions.get('window');
const leftWidth = 80;
const rightWidth = width-80;

export default class ShopType extends Component{

	constructor(props){
		super(props)
		this.state={
			leftShopTypeData:[],rightShopInfoData:[],isLoading:true,netError:false,}
	}

	componentDidMount(){
		this.getData();
	}

	getData(){
		fetch(URL_LEFT)
		 .then((response)=>response.json())
		 .then((responseData)=>{
		 	let data = responseData.data.class_list;
		 	let dataTemp = [];

		 	data.map(function(item,i){
		 		dataTemp.push({
		 			key:i,value:item
		 		})
		 	})

		 	this.setState({
				leftShopTypeData:this.state.leftShopTypeData.concat(dataTemp),})
		 	this.getDataShopInfo(dataTemp[0].value.gc_id);

		 })
		 .catch((error)=>{
		 	this.setState({
		 		isLoading:false,netError:true,})
		 })
		 .done();
	}

	renderShopType(){
		return(
			<FlatList 
				data={this.state.leftShopTypeData}
				renderItem={this.renderShopTypeItem.bind(this)}
				ItemSeparatorComponent={this.itemSeparatorComponent}
				style={styles.style_flatlist}
			/>
		);
	}

	renderShopTypeItem({item}){
		return(
			<TouchableOpacity onPress={()=>{
				this.getDataShopInfo(item.value.gc_id);
			}}>
				<View style={{width:leftWidth,alignItems:'center',marginTop:8,marginBottom:8}}>
					<Image source={{uri:item.value.image_inactive===''?'img_default':item.value.image_inactive}} style={{width:40,height:40}}/>
					<Text style={{fontSize:15,color:'gray',marginTop:5}}>{item.value.gc_name}</Text>
				</View>
			</TouchableOpacity>
		);
	}

	render(){
			return(
				<View>
					<View style={{width:width,height:50,justifyContent:'center',backgroundColor:'white'}}>
						<Text style={{fontSize:18,color:'black'}}>
							商品分类
						</Text>
					</View>
					<View style={{flexDirection:'row'}}>
						{this.renderShopType()}
						<View style={{backgroundColor:'gray',width:1}}/>
						
						{this.state.isLoading?this.renderLoadingView():this.renderShopTypeInfo()}
					</View>
				</View>
			);
	}

	renderShopTypeInfo(){
		return(
			<SectionList
				renderItem={this.renderShopTypeInfoItem}
				renderSectionHeader={this.renderShopTypeInfoHeaderItem}
				sections={this.state.rightShopInfoData}
				keyExtractor={this.keyExtractor}
				style={{paddingBottom:20}}
			/>
		);
	}
	
	renderShopTypeInfoItem = ({section,index}) => (
        <View  style={styles.list}>
            {section.data.map((item,i) => this.renderExpenseItem(item,i,index))}
        </View>
    );

    renderExpenseItem(item,index) {
		if(index != 0){
			return;
		}
        return(
	        <TouchableOpacity key={i} underlayColor="transparent">
	            <View style={styles.row}>
	                <Text>{item.gc_name}</Text>
	            </View>
	        </TouchableOpacity>
        );
    }

	renderShopTypeInfoHeaderItem({section}){
		var txt = section.key;
		return(
			<View style={styles.style_section_head_item}>
				<Text>{txt}</Text>
				<Image style={{width:9,height:9}} source={{uri:'img_goods_detail_allow_right'}} />
			</View>
		);
	}

	getDataShopInfo(gc_id){
		this.setState({
					isLoading:true,});
		fetch('http://test.hubangyoushang.com/mobile/index.php?act=goods_class&op=index&gc_id='+gc_id)
		 .then((response)=>response.json())
		 .then((responseData)=>{
		 	let data = responseData.data.class_list;
		 	let dataTemp = [];
			
			for(var i=0;i<data.length;i++){
				let mData = data[i];
				dataTemp.push({
					key:mData.gc_name,data:mData.next_class_list
				});
			}
		 	this.setState({
				rightShopInfoData:dataTemp,isLoading:false,})

		 })
		 .catch((error)=>{

		 })
		 .done();
	}

	keyExtractor(item,index){
		return "index"+index;
	}

	itemSeparatorComponent(){
		return(
			<View style={{width:leftWidth,height:1,backgroundColor:'gray'}}/>
		);
	}

	// 加载等待页
	renderLoadingView(){
		return(
			<View style={styles.style_default_container}>
				<ActivityIndicator 
					animating={true}
					color='red'
					size='large'
					style={{width:rightWidth}}
				/>
			</View>
		)
	}

}

const styles = StyleSheet.create({
	style_flatlist:{
		borderTopWidth:1,borderTopColor:'gray',borderBottomWidth:1,borderBottomColor:'gray',backgroundColor:'white',marginBottom:10,width:leftWidth
	},style_section_head_item:{
		width:rightWidth,height:40,flexDirection:'row',justifyContent:'space-between',paddingLeft:10,paddingRight:10,},list: {
        flexDirection: 'row',alignItems: 'flex-start',backgroundColor: '#FFFFFF',flexWrap:'wrap',width:rightWidth,row: {
        height:30,paddingLeft:6,paddingRight:6,alignItems: 'center',justifyContent: 'center',borderRightWidth:1,borderRightColor:'gray',style_default_container:{
	  	flexDirection:'row',backgroundColor:'#F5FCFF',width:rightWidth
	 },});