转载

ReactNative 仿美团项目

今天公司iOS项目完成了,在闲暇时候回顾一下上半年写过的ReactNative 仿美团项目,感觉好久好久没有再动过ReactNative混合模式了,对于ReactNative中ES6很是熟练,在这段时间几乎每天都用Flex ES6语法糖来写手机端页面,对于web前端手机页面也有了一定的了解,为了ReactNative项目能够更加熟练的编写,也积累了很多前端知识,学习永无止境,但是实战项目是使自己增长最快的方法,今天为大家分享ReactNative 仿美团项目,和大家一起学习。

一、第一部分直接上代码,先了解下项目结构

1、仿美团项目:设置标签栏和导航栏


ReactNative 仿美团项目

导航栏和标签栏.png

核心代码:

JavaScript
var LBRNMain = React.createClass({
    getInitialState(){
      return {
         selectedTab:'Home'
       }
    },
render() {
      return (
                    {this.childNavigetor('首页','Home','icon_tabbar_homepage','icon_tabbar_homepage_selected','Home',LBRNHome)}
            {this.childNavigetor('商家','EB','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','EB',LBRNEB)}
            {this.childNavigetor('我的','Mine','icon_tabbar_mine','icon_tabbar_mine_selected','Mine',LBRNMine)}
            {this.childNavigetor('更多','More','icon_tabbar_misc','icon_tabbar_misc_selected','More',LBRNMore)}
       );
},
childNavigetor(title,tabName,normalImage, selectedImage,componentName,component){
     return (
        }
            renderSelectedIcon={() => }
            onPress={() => this.setState({ selectedTab: componentName })}>
             {
               return Navigator.SceneConfigs.PushFromRight;
               }}
               renderScene={(route, navigator) => {
               let Component = route.component;
               return                }}
            />
         )
  }
})
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
    iconStyle:{
        width:28,
        height:28
    },
        selectedTextStyle:{
        color:'#fb6320'
    }
});
module.exports = LBRNMain;

2、 加载启动图片

核心代码:

JavaScript
var LBRNLaunchImage = React.createClass({
    render(){
       return(
                )
    },
    //增加定时器、请求网络数据
    componentDidMount(){
      setTimeout(()=>{
      this.props.navigator.replace({
      component:LBRNMain
      })
      },1000)
    }
})
const styles=StyleSheet.create({
   container:{
   flex:1
  }
})
module.exports=LBRNLaunchImage;

3、更多模块实现

① 错误解决

ReactNative 仿美团项目

错误解决.png

解决办法:cd进入项目根目录执行如下安装命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

② 正确截图

ReactNative 仿美团项目

zongduan.png

③ 错误截图

ReactNative 仿美团项目

错误截图.png

4、导入文件方式

第一种方式    

import SmallMiddleView from './SmallMiddleView.js';

第二种方式

SmallMiddleView = require('SmallMiddleView');

5、我的模块

ReactNative 仿美团项目

我的界面.png

核心代码:

JavaScript
var width = require('Dimensions').get('window').width;
var LBRNMineCell = require('./LBRNMineCell');
var LBRNMine = React.createClass({
        render(){
            return (
                                                                                                                                                                                                                                        LBRNMeiTuan                                                                                                                                                                                                                                {/*美团劵、评价、收藏*/}
                                                            {this.renderViewMethod('500','美团劵')}
                                                                {this.renderViewMethod('500','评价')}
                                                                {this.renderViewMethod('500','收藏')}
                                                        {/*待付款、待使用、待评价、退货/售后*/}
                                                            {this.renderImageMethod('order1','待付款')}
                                {this.renderImageMethod('order2','待使用')}
                                {this.renderImageMethod('order3','待评价')}
                                {this.renderImageMethod('order4','退货/售后')}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            );
        },
        renderViewMethod(count,name){
            return(
                                    {count}                    {name}                                )
        },
        renderImageMethod(imageString,name){
            return(
                                                        {name}                                )
        }
    }
)
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DCDCDB',
    },
    backgroundStyle:{
        width:width,
        height:300,
        backgroundColor:'#FB6320',
        position:'absolute',
        top:0
    }
});
module.exports = LBRNMine;

6、商家模块

ReactNative 仿美团项目

商家.png

核心代码:

JavaScript
var width = require('Dimensions').get('window').width;
var LBRNEB = React.createClass({
    getDefaultProps(){
        return{
          urlString: 'http://i.meituan.com/topic/mingdian?ci=1&f=iphone&msid=48E2B810-805D-4821-9CDD-D5C9E01BC98A2015-07-02-16-25124&token=p19ukJltGhla4y5Jryb1jgCdKjsAAAAAsgAAADHFD3UYGxaY2FlFPQXQj2wCyCrhhn7VVB-KpG_U3-clHlvsLM8JRrnZK35y8UU3DQ&userid=10086&utm_campaign=AgroupBgroupD100Fab_chunceshishuju__a__a___b1junglehomepagecatesort__b__leftflow___ab_gxhceshi__nostrategy__leftflow___ab_gxhceshi0202__b__a___ab_pindaochangsha__a__leftflow___ab_xinkeceshi__b__leftflow___ab_gxtest__gd__leftflow___ab_waimaiwending__a__a___ab_gxh_82__nostrategy__leftflow___i_group_5_2_deallist_poitype__d__d___ab_b_food_57_purepoilist_extinfo__a__a___ab_pindaoshenyang__a__leftflow___ab_pindaoquxincelue0630__b__b1___a20141120nanning__m1__leftflow___ab_i_group_5_3_poidetaildeallist__a__b___ab_waimaizhanshi__b__b1___ab_i_group_5_5_onsite__b__b___ab_i_group_5_6_searchkuang__a__leftflowGhomepage_bargainmiddle_30311731&utm_content=4B8C0B46F5B0527D55EA292904FD7E12E48FB7BEA8DF50BFE7828AF7F20BB08D&utm_medium=iphone&utm_source=AppStore&utm_term=5.7&uuid=4B8C0B46F5B0527D55EA292904FD7E12E48FB7BEA8DF50BFE7828AF7F20BB08D&version_name=5.7&lat=23.12005&lng=113.3076'
        }
    },
    getInitialState(){
        return{
          urlString: 'http://i.meituan.com/topic/mingdian?ci=1&f=iphone&msid=48E2B810-805D-4821-9CDD-D5C9E01BC98A2015-07-02-16-25124&token=p19ukJltGhla4y5Jryb1jgCdKjsAAAAAsgAAADHFD3UYGxaY2FlFPQXQj2wCyCrhhn7VVB-KpG_U3-clHlvsLM8JRrnZK35y8UU3DQ&userid=10086&utm_campaign=AgroupBgroupD100Fab_chunceshishuju__a__a___b1junglehomepagecatesort__b__leftflow___ab_gxhceshi__nostrategy__leftflow___ab_gxhceshi0202__b__a___ab_pindaochangsha__a__leftflow___ab_xinkeceshi__b__leftflow___ab_gxtest__gd__leftflow___ab_waimaiwending__a__a___ab_gxh_82__nostrategy__leftflow___i_group_5_2_deallist_poitype__d__d___ab_b_food_57_purepoilist_extinfo__a__a___ab_pindaoshenyang__a__leftflow___ab_pindaoquxincelue0630__b__b1___a20141120nanning__m1__leftflow___ab_i_group_5_3_poidetaildeallist__a__b___ab_waimaizhanshi__b__b1___ab_i_group_5_5_onsite__b__b___ab_i_group_5_6_searchkuang__a__leftflowGhomepage_bargainmiddle_30311731&utm_content=4B8C0B46F5B0527D55EA292904FD7E12E48FB7BEA8DF50BFE7828AF7F20BB08D&utm_medium=iphone&utm_source=AppStore&utm_term=5.7&uuid=4B8C0B46F5B0527D55EA292904FD7E12E48FB7BEA8DF50BFE7828AF7F20BB08D&version_name=5.7&lat=23.12005&lng=113.3076'
        }
    },
    render(){
        return (
                          {this.renderNavbarMethod()}
               {this.webViewMethod()}
                   );
    },
    renderNavbarMethod(){
        return(
                                                                                                    商家                                                                                        )
    },
    webViewMethod(){
        return(
                    )
    }
 }
)
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    ebStyleStyle:{
        width:width,
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'#FB6320',
        flexDirection:'row',
        justifyContent:'space-between',
    },
    toolBarIcon:{
        width:30,
        height:30,
    }
});
module.exports = LBRNEB;

7、首页上部视图

ReactNative 仿美团项目

topView.png

核心代码:

JavaScript
// 当滚动动画结束之后调用此回调
onScrollAnimationEnd(event){
     // Math.floor(x)获取不大于x的最大整数
     var page = Math.floor(event.nativeEvent.contentOffset.x/width);
     console.log(page);
     this.setState({
     currentPage:page
  })
},
renderScrollViewMethod(){
     var dataCount = homeTopMenuData;
     var array = [];
     for (var i=0;i

注意事项:

JavaScript
// 底部如果是ScrollView,那么根节点就是ScrollView,不要把根节点设置为View   // 要使ListView换行,要设置ListView宽度
contentStyle:{
    flexDirection:'row',
    flexWrap:'wrap',
    width:width
}

8、首页中间组件以及购物中心组件

ReactNative 仿美团项目

购物中心.png

核心代码:

JavaScript
var LBRNHomeShopCenterView = React.createClass({
    getDefaultProps(){
         return{
            dataArray:[]
         }
    },
    getInitialState(){
         let dataSource = new ListView.DataSource({rowHasChanged:(row1,row2) => row1 !== row2});
         return{
           dataSource:dataSource.cloneWithRows(this.props.dataArray)
        }
    },
    render(){
         return(
            )
},
//cell
renderCenterRow(rowData,sectionID,rowID){
       var imageMarginRight = 0;
      if (this.props.dataArray.length-1 == rowID){
          imageMarginRight = 10;
      }
      return(
                             {rowData.showtext.text}                   {rowData.name}                )
 }
})
const styles = StyleSheet.create({
      container:{
          backgroundColor:'white',
          marginLeft:10
      },
      contentStyle:{
          flexDirection:'row',
     }
})
module.exports=LBRNHomeShopCenterView;

9、购物中心详情

购物中心详情页面使用了回调函数、逆向传值和正向传值

ReactNative 仿美团项目

购物中心详情.png

核心代码:

JavaScript
getDefaultProps(){
     return{
       dataArray:[],
       popToHome:null
}
},
urlMethod(url){
     ///处理url
    var httpUrl=url.replace('imeituan://www.meituan.com/web/?url=','');
    if (httpUrl == null)return;
    this.props.popToHome(httpUrl);
    //AlertIOS.alert(httpUrl);
}this.popToHome(url)}///回调函数
/>

10、热门中心模块

热门中心模块和购物中心类似

核心代码:

var width = require('Dimensions').get('window').width;
var widthView;
var LBRNHomeHotView = React.createClass({
        getDefaultProps(){
            return{
                data:[],
                popToHot:null
            }
        },
        getInitialState(){
            let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            if(this.props.data.length == 2){
                widthView = width/2.0;
            }else {
                widthView = width/4;
            }
            return{
                dataSource : ds.cloneWithRows(this.props.data)
            }
        },
        render(){
            return (
                            );
        },
        renderRow(rowData){
            return(
                                    this.pressMethod(rowData.target)} style={[styles.touchableStyle,{borderRightWidth: 0.5,borderTopWidth: 0.5,borderRightColor:'#bbb',borderTopColor:'#bbb',width:widthView}]}>
                      {rowData.title}                      {rowData.subTitle}                                                                      )
        },
        pressMethod(target){
            if (target.length == 0)return;
            this.props.popToHot(target.replace('imeituan://www.meituan.com/web?url=',''));
        }
    }
)
const styles = StyleSheet.create({
    contentStyle:{
        flexDirection:'row'
    },
    touchableStyle:{
        justifyContent:'center',
        alignItems:'center',
        paddingTop:10,
        paddingBottom:10
    }
});
module.exports = LBRNHomeHotView;

11、猜你喜欢

猜你喜欢使用了回调函数、逆向传值和正向传值

ReactNative 仿美团项目

猜你喜欢.png

核心代码:

dataMethod(){
      fetch(this.props.api_url)
       .then((responder)=>responder.json())
       .then(responderData=>{
          this.setState({dataSource:this.state.dataSource.cloneWithRows(responderData.data)})
       })
      .catch((error) => {
         this.setState({dataSource:this.state.dataSource.cloneWithRows(homeBottomData.data)})
     });
}
dealWithUrl(url){
    if (url.search('w.h') == -1){
       return url.replace('.webp','');
    }else {
      return url.replace('w.h','120.90')
    }
}

二、第二部分项目运行

在github上面下载代码直接使用命令行git clone https://github.com/lb2281075105/LBRNMeiTuan.git,直接运行可能显示错误,需要执行下面的命令才能运行:

1、首先:【npm install】

2、其次:【react-native-link】

3、最后:【react-native run-ios】

4、如果有什么问题可以github直接issue给我,或者留言给我,一起学习,一起讨论

三、第三部分学习心得

学习ReactNative开发,感觉编写代码心里很舒畅,用JSX语句开发App,很爽快,自学ReactNative,有时间看看ReactNative中文网站资源,就拿美团作为练手项目,也是第一个在github上面开源项目,接下来也会深入学习,写更多的开源项目来提升自己的能力,也会不断更新笔记。

源码请点击:ReactNative 仿美团项目,您喜欢,请读者给star,您的点击会更加增加我的激情,增加更多的开源项目分享给大家,后面我会把ReactNative每一步学习到的东西记录下来,,谢谢。

正文到此结束
Loading...