reactNative 商品分类效果

前端之家收集整理的这篇文章主要介绍了reactNative 商品分类效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


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

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

  1. import React,{Component} from 'react';
  2. import {
  3. View,Text,Image,FlatList,StyleSheet,Dimensions,SectionList,TouchableOpacity,ActivityIndicator,TouchableNativeFeedback
  4. } from 'react-native';
  5.  
  6. const URL_LEFT = "http://test.hubangyoushang.com/mobile/index.PHP?act=goods_class&op=index";
  7.  
  8. const {width} = Dimensions.get('window');
  9. const leftWidth = 80;
  10. const rightWidth = width-80;
  11.  
  12. export default class ShopType extends Component{
  13.  
  14. constructor(props){
  15. super(props)
  16. this.state={
  17. leftShopTypeData:[],rightShopInfoData:[],isLoading:true,netError:false,}
  18. }
  19.  
  20. componentDidMount(){
  21. this.getData();
  22. }
  23.  
  24. getData(){
  25. fetch(URL_LEFT)
  26. .then((response)=>response.json())
  27. .then((responseData)=>{
  28. let data = responseData.data.class_list;
  29. let dataTemp = [];
  30.  
  31. data.map(function(item,i){
  32. dataTemp.push({
  33. key:i,value:item
  34. })
  35. })
  36.  
  37. this.setState({
  38. leftShopTypeData:this.state.leftShopTypeData.concat(dataTemp),})
  39. this.getDataShopInfo(dataTemp[0].value.gc_id);
  40.  
  41. })
  42. .catch((error)=>{
  43. this.setState({
  44. isLoading:false,netError:true,})
  45. })
  46. .done();
  47. }
  48.  
  49. renderShopType(){
  50. return(
  51. <FlatList
  52. data={this.state.leftShopTypeData}
  53. renderItem={this.renderShopTypeItem.bind(this)}
  54. ItemSeparatorComponent={this.itemSeparatorComponent}
  55. style={styles.style_flatlist}
  56. />
  57. );
  58. }
  59.  
  60. renderShopTypeItem({item}){
  61. return(
  62. <TouchableOpacity onPress={()=>{
  63. this.getDataShopInfo(item.value.gc_id);
  64. }}>
  65. <View style={{width:leftWidth,alignItems:'center',marginTop:8,marginBottom:8}}>
  66. <Image source={{uri:item.value.image_inactive===''?'img_default':item.value.image_inactive}} style={{width:40,height:40}}/>
  67. <Text style={{fontSize:15,color:'gray',marginTop:5}}>{item.value.gc_name}</Text>
  68. </View>
  69. </TouchableOpacity>
  70. );
  71. }
  72.  
  73. render(){
  74. return(
  75. <View>
  76. <View style={{width:width,height:50,justifyContent:'center',backgroundColor:'white'}}>
  77. <Text style={{fontSize:18,color:'black'}}>
  78. 商品分类
  79. </Text>
  80. </View>
  81. <View style={{flexDirection:'row'}}>
  82. {this.renderShopType()}
  83. <View style={{backgroundColor:'gray',width:1}}/>
  84. {this.state.isLoading?this.renderLoadingView():this.renderShopTypeInfo()}
  85. </View>
  86. </View>
  87. );
  88. }
  89.  
  90. renderShopTypeInfo(){
  91. return(
  92. <SectionList
  93. renderItem={this.renderShopTypeInfoItem}
  94. renderSectionHeader={this.renderShopTypeInfoHeaderItem}
  95. sections={this.state.rightShopInfoData}
  96. keyExtractor={this.keyExtractor}
  97. style={{paddingBottom:20}}
  98. />
  99. );
  100. }
  101. renderShopTypeInfoItem = ({section,index}) => (
  102. <View style={styles.list}>
  103. {section.data.map((item,i) => this.renderExpenseItem(item,i,index))}
  104. </View>
  105. );
  106.  
  107. renderExpenseItem(item,index) {
  108. if(index != 0){
  109. return;
  110. }
  111. return(
  112. <TouchableOpacity key={i} underlayColor="transparent">
  113. <View style={styles.row}>
  114. <Text>{item.gc_name}</Text>
  115. </View>
  116. </TouchableOpacity>
  117. );
  118. }
  119.  
  120. renderShopTypeInfoHeaderItem({section}){
  121. var txt = section.key;
  122. return(
  123. <View style={styles.style_section_head_item}>
  124. <Text>{txt}</Text>
  125. <Image style={{width:9,height:9}} source={{uri:'img_goods_detail_allow_right'}} />
  126. </View>
  127. );
  128. }
  129.  
  130. getDataShopInfo(gc_id){
  131. this.setState({
  132. isLoading:true,});
  133. fetch('http://test.hubangyoushang.com/mobile/index.PHP?act=goods_class&op=index&gc_id='+gc_id)
  134. .then((response)=>response.json())
  135. .then((responseData)=>{
  136. let data = responseData.data.class_list;
  137. let dataTemp = [];
  138. for(var i=0;i<data.length;i++){
  139. let mData = data[i];
  140. dataTemp.push({
  141. key:mData.gc_name,data:mData.next_class_list
  142. });
  143. }
  144. this.setState({
  145. rightShopInfoData:dataTemp,isLoading:false,})
  146.  
  147. })
  148. .catch((error)=>{
  149.  
  150. })
  151. .done();
  152. }
  153.  
  154. keyExtractor(item,index){
  155. return "index"+index;
  156. }
  157.  
  158. itemSeparatorComponent(){
  159. return(
  160. <View style={{width:leftWidth,height:1,backgroundColor:'gray'}}/>
  161. );
  162. }
  163.  
  164. // 加载等待页
  165. renderLoadingView(){
  166. return(
  167. <View style={styles.style_default_container}>
  168. <ActivityIndicator
  169. animating={true}
  170. color='red'
  171. size='large'
  172. style={{width:rightWidth}}
  173. />
  174. </View>
  175. )
  176. }
  177.  
  178. }
  179.  
  180. const styles = StyleSheet.create({
  181. style_flatlist:{
  182. borderTopWidth:1,borderTopColor:'gray',borderBottomWidth:1,borderBottomColor:'gray',backgroundColor:'white',marginBottom:10,width:leftWidth
  183. },style_section_head_item:{
  184. width:rightWidth,height:40,flexDirection:'row',justifyContent:'space-between',paddingLeft:10,paddingRight:10,},list: {
  185. flexDirection: 'row',alignItems: 'flex-start',backgroundColor: '#FFFFFF',flexWrap:'wrap',width:rightWidth,row: {
  186. height:30,paddingLeft:6,paddingRight:6,alignItems: 'center',justifyContent: 'center',borderRightWidth:1,borderRightColor:'gray',style_default_container:{
  187. flexDirection:'row',backgroundColor:'#F5FCFF',width:rightWidth
  188. },});

猜你在找的React相关文章