首页 » React Native » React Native技术文章 » 正文

[RN实战-嘎嘎商城]之商家详情界面布局分析与实现

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

          这段时间正在开发更新React Native嘎嘎商城实战项目,今天我们来看一下商家详情界面的分析与实现。作为了一个商城客户端的项目,商家详情是必不可少了,在项目中也是有举足轻重的作用。同时该界面布局又是比较复杂的。

          项目地址:https://github.com/jiangqqlmj/GaGaMall

刚创建的React Native交流九群:536404410,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)分析

首先我们我们来看一下商家详情最终实现的效果(界面主要为商家基本信息,功能条以及用户评论列表)。

         看到上面的布局我们来分析一下实现,主要分为三块:商家基本信息,中间功能条(评论,收藏,分享,地理定位以及电话),底部评论信息。其中上半部分商家基本信息以及中间功能条布局比较简单,一般的上下左右布局就可以搞定了,其中底部的评价列表就稍微复杂一点,有点类似于微博Cell的赶脚。我这边后来分析实现的办法是采用:顶部商家基本信息以及中间功能条作为底部列表(ListView)的头布局(Header),然后ListView的每项Item中再嵌套一个GridView布局实现。

         [特别声明]:关于上面提到的GridView布局实现,参考了大大的reading项目:点击进入Reading项目

(三):实现

         现在我们一起来看一下商家详情的具体实现:

         3.1.顶部商家基本信息布局实现代码:

//渲染商家基本信息布局
  renderStoreBaisc(){
     const {navigator,route} = this.props; 
     return (
       <View style={{height: 160,alignItems: 'center', justifyContent: 'center' }}>
            <Image source={require('../imgs/store/ic_store_top_bg.png')} style={{width:width,height:160}}>
                <View style={{flexDirection:'row',marginLeft:24,height:68,alignItems:'center',marginTop:12}}>
                     <Image source={require('../imgs/store/merchants/ic_merchants_icon.png')} 
                            style={{width:68,height:68,borderRadius:34}}/>
                     <View style={{marginLeft:15}}>
                           <Text style={{color:'white',fontSize:16}}>四川川二娃</Text>
                           <Text style={{color:'white',fontSize:14,marginTop:5}}>川菜,中国菜</Text>
                           <View style={{flexDirection:'row',alignItems:'center',marginTop:5}}>
                                 <Image source={require('../imgs/store/merchants/ic_merchants_comment.png')}
                                        style={{width:14,height:14}}
                                        />
                                 <Text style={{color:'#eee',fontSize:13,marginLeft:5}}>59条评论</Text>
                           </View>
                           <View style={{flexDirection:'row',marginTop:5,alignItems:'center'}}>
                                 <Image source={require('../imgs/store/merchants/ic_merchants_time.png')}
                                        style={{width:14,height:14}}
                                        />
                                 <Text style={{color:'#eee',fontSize:13,marginLeft:5}}>10:00am-12:00pm</Text>
                           </View>
                           <View style={{flexDirection:'row',marginTop:5,alignItems:'center'}}>
                                 <Image source={require('../imgs/store/merchants/ic_merchants_peisong.png')}
                                        style={{width:14,height:14}}
                                        />
                                 <Text style={{color:'#eee',fontSize:13,marginLeft:5}}>5km之内免费</Text>
                           </View>
                     </View>
                </View>
                <View style={{flex:1,justifyContent:'flex-end'}}>
                      <Text style={{color:'#fff',marginBottom:5,marginLeft:15,marginRight:15}}>公告信息:全场满200,八折畅享美食</Text>
                </View>
            </Image>
        </View>
     );
  }

     3.2.中间功能条布局(评论,收藏,分享以及地点,电话)

//渲染中间部分功能界面布局
  renderCenterBar(){
     return (
       <View style={{backgroundColor:'white'}}>
          <View style={{flexDirection:'row',height:45}}>
               <View style={{flex:1}}>
                    <TouchableOpacity style={{justifyContent:'center',alignItems:'center',flex:1}}
                          onPress={()=>{this.buttonItemAction(0)}}>
                          <View style={{justifyContent:'center',alignItems:'center'}}>
                                <Image source={require('../imgs/store/merchants/ic_merchants_comment_icon.png')} 
                                      style={{width:16,height:15}}/>
                                <Text style={{fontSize:12,color:'black',marginTop:3}}>评论</Text> 
                          </View>
                    </TouchableOpacity>
               </View>
                    <Image source={require('../imgs/store/ic_store_shu.png')} style={{height:30,width:1,marginTop:7}}/>
               <View style={{flex:1}}>
                    <TouchableOpacity style={{justifyContent:'center',alignItems:'center',flex:1}}
                          onPress={()=>{this.buttonItemAction(1)}}>
                          <View style={{justifyContent:'center',alignItems:'center'}}>
                                <Image source={require('../imgs/store/merchants/ic_merchants_collect.png')} 
                                      style={{width:16,height:15}}/>
                                <Text style={{fontSize:12,color:'black',marginTop:3}}>收藏</Text> 
                          </View>
                    </TouchableOpacity>
               </View>
                    <Image source={require('../imgs/store/ic_store_shu.png')} style={{height:30,width:1,marginTop:7}}/>
               <View style={{flex:1}}>
                    <TouchableOpacity style={{justifyContent:'center',alignItems:'center',flex:1}}
                          onPress={()=>{this.buttonItemAction(2)}}>
                          <View style={{justifyContent:'center',alignItems:'center'}}>
                                <Image source={require('../imgs/store/merchants/ic_merchants_share.png')} 
                                      style={{width:15,height:17}}/>
                                <Text style={{fontSize:12,color:'black',marginTop:3}}>分享</Text> 
                          </View>
                    </TouchableOpacity>
               </View>
          </View>
          <Image source={require('../imgs/ic_center_line.png')}/>
          <TouchableOpacity onPress={()=>{this.buttonItemAction(3)}}>
               <View style={{flexDirection:'row',height:35,alignItems:'center',flex:1}}>
                    <Image source={require('../imgs/store/merchants/ic_merchants_location.png')} 
                           style={{width:14,height:18,marginLeft:15}}/>
                    <Text style={{color:'#000',fontSize:12,marginLeft:8}}>上海市徐汇区徐家汇123号</Text>
                    <View style={{flex:1,alignItems:'flex-end'}}>
                        <Image source={require('../imgs/ic_center_right_arrow.png')} 
                           style={{width:12,height:18,marginRight:15}}/>
                    </View>       
               </View>
          </TouchableOpacity>
          <ShortLine/>
          <TouchableOpacity onPress={()=>{this.buttonItemAction(4)}}>
               <View style={{flexDirection:'row',height:35,alignItems:'center',flex:1}}>
                    <Image source={require('../imgs/store/merchants/ic_merchants_phone.png')} 
                           style={{width:14,height:18,marginLeft:15}}/>
                    <Text style={{color:'#000',fontSize:12,marginLeft:8}}>+(86)13800138000</Text>
                    <View style={{flex:1,alignItems:'flex-end'}}>
                        <Image source={require('../imgs/ic_center_right_arrow.png')} 
                           style={{width:12,height:18,marginRight:15}}/>
                    </View>   
               </View>
          </TouchableOpacity>
          <Image source={require('../imgs/ic_center_line.png')}/>
          <View style={{height:45,flex:1,justifyContent:'center',alignItems:'center'}}>
                <TouchableOpacity onPress={()=>{this.buttonItemAction(5)}} style={styles.share_img}> 
                      <Text style={styles.share_btn_tv}>开始点餐</Text>
                </TouchableOpacity>
          </View> 
       </View>
     );
  }

     3.3.底部评论列表实现,

      首先我们定义ListView组件和相关属性:

首先我们定义ListView组件和相关属性:
//进行渲染数据
  renderContent(dataSource) {
    return (
      <ListView
        initialListSize={1}
        dataSource={dataSource}
        renderRow={this.renderItem}
        style={{backgroundColor:'white',flex:1}}
        onEndReachedThreshold={10}
        enableEmptySections={true}
        renderSeparator={this._renderSeparatorView}
        renderHeader={this.renderHeaderContent}
      />
    );
   }

查看上面ListView中的属性,主要需要看renderRow中的renderItem(渲染ListView每项Item的布局)以及readerHeader中的readerHeaderContent(渲染头布局)。

        我们把顶部商家基本信息以及中间功能条布局作为ListView的Header布局。

//渲染ListView的Header布局
  renderHeaderContent(){
      return (
          <View>
             {this.renderStoreBaisc()}
             {this.renderCenterBar()}
             <View style={{height:32,alignItems:'center',flexDirection:'row',backgroundColor:'#f5f5f5'}}>
                 <Text style={{marginLeft:10}}>评论信息</Text>
                 <View style={{flex:1,alignItems:'flex-end'}}>
                      <TouchableOpacity onPress={()=>{this.buttonItemAction(6)}}>
                            <View style={{flexDirection:'row',height:32,alignItems:'center'}}>
                                  <Text style={{fontSize:12}}>添加评论</Text>
                                  <Image source={require('../imgs/ic_center_right_arrow.png')} 
                                         style={{width:12,height:18,marginRight:15}}/>
                           </View>
                      </TouchableOpacity>
                 </View>     
            </View>
          </View>
      );
  }

紧接着看一下ListView每项Item以及其中签到的图片GridView的布局实现.

//渲染每一项的数据
  renderItem(comment) {
    return (
        <View>
           <View style={{flexDirection:'row',margin:10}}>
                <Image source={require('../imgs/store/merchants/ic_comment_icon.png')} style={{width:35,height:35}}/>
                <View style={{flex:1,marginLeft:8}}>
                     <Text style={{color:'black',fontSize:15}}>{comment.nickname}</Text>
                     <Text style={{color:'#777',fontSize:12,marginTop:5}}>{comment.content}</Text>
                </View>
                <View style={{marginLeft:5}}><Text style={{color:'#777',fontSize:12}}>{comment.createTime}</Text></View>
           </View>
           {this.renderCommentImage(comment.imgs)}
        </View>
    );
  }
  //渲染图片布局
  renderCommentImage(imgs){
     return (
        <View style={{marginLeft:50,marginBottom:5}}> 
            <GridView
             items={Array.from(imgs)}
             itemsPerRow={3}
             renderItem={this.renderImageItem}
            />
       </View>     
     );
  }
  renderImageItem(rowData) {
     return (
        <Image  key={rowData.imgUrl} source={{uri:rowData.imgUrl}} style={{width:70,height:70,margin:5}}/>
    );
  }

    3.4.运行效果: 

(四)最后总结

今天带着大家实现了一下商家详情的效果布局,具体代码以及资源文章请详见项目:https://github.com/jiangqqlmj/GaGaMall

刚创建的React Native交流九群:536404410,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

尊重原创,转载请注明:From Sky丶清(http://www.lcode.org) 侵权必究!

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

关注我的微博,可以获得更多精彩内容