{"id":19504161,"url":"https://github.com/lb2281075105/lbrnmeituan","last_synced_at":"2025-09-03T13:06:36.455Z","repository":{"id":125373701,"uuid":"91517194","full_name":"lb2281075105/LBRNMeiTuan","owner":"lb2281075105","description":"ReactNative 仿美团项目","archived":false,"fork":false,"pushed_at":"2020-05-14T13:03:03.000Z","size":11957,"stargazers_count":85,"open_issues_count":3,"forks_count":28,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-04T05:41:55.490Z","etag":null,"topics":["android-app","flex","flexbox","ios-app","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lb2281075105.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-17T00:40:34.000Z","updated_at":"2023-03-28T16:08:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"40ea3ab4-1bb3-4094-9678-75d29a6be224","html_url":"https://github.com/lb2281075105/LBRNMeiTuan","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb2281075105%2FLBRNMeiTuan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb2281075105%2FLBRNMeiTuan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb2281075105%2FLBRNMeiTuan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb2281075105%2FLBRNMeiTuan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lb2281075105","download_url":"https://codeload.github.com/lb2281075105/LBRNMeiTuan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250917283,"owners_count":21507561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-app","flex","flexbox","ios-app","react","react-native"],"created_at":"2024-11-10T22:24:38.924Z","updated_at":"2025-04-26T00:33:28.633Z","avatar_url":"https://github.com/lb2281075105.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LBRNMeiTuan\nReactNative 仿美团项目\n\n1. 仿美团项目：首先设置标签栏和导航栏\n\n\u003cimg src=\"导航栏和标签栏.png\" width=\"375\"\u003e\n\n核心代码：\n```JavaScript\n\n        var LBRNMain = React.createClass({\n\n            getInitialState(){\n              return {\n                 selectedTab:'Home'\n               }\n            },\n        render() {\n              return (\n                \u003cTabNavigator\u003e\n\n                    {this.childNavigetor('首页','Home','icon_tabbar_homepage','icon_tabbar_homepage_selected','Home',LBRNHome)}\n                    {this.childNavigetor('商家','EB','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','EB',LBRNEB)}\n                    {this.childNavigetor('我的','Mine','icon_tabbar_mine','icon_tabbar_mine_selected','Mine',LBRNMine)}\n                    {this.childNavigetor('更多','More','icon_tabbar_misc','icon_tabbar_misc_selected','More',LBRNMore)}\n               \u003c/TabNavigator\u003e\n        );\n        },\n\n        childNavigetor(title,tabName,normalImage, selectedImage,componentName,component){\n             return (\n               \u003cTabNavigator.Item\n                    selectedTitleStyle={styles.selectedTextStyle}\n                    selected={this.state.selectedTab === tabName}\n                    title={title}\n                    renderIcon={() =\u003e \u003cImage source={{uri:normalImage}} style={styles.iconStyle} /\u003e}\n                    renderSelectedIcon={() =\u003e \u003cImage source={{uri:selectedImage}} style={styles.iconStyle} /\u003e}\n                    onPress={() =\u003e this.setState({ selectedTab: componentName })}\u003e\n                    \u003cNavigator\n                       initialRoute={{ name: componentName, component: component }}\n                       configureScene={(route) =\u003e {\n                       return Navigator.SceneConfigs.PushFromRight;\n                       }}\n                       renderScene={(route, navigator) =\u003e {\n                       let Component = route.component;\n                       return \u003cComponent {...route.passProps} navigator={navigator} /\u003e\n                       }}\n                    /\u003e\n\n             \u003c/TabNavigator.Item\u003e\n            )\n          }\n        })\n\n        const styles = StyleSheet.create({\n            container: {\n                flex: 1,\n                justifyContent: 'center',\n                alignItems: 'center',\n                backgroundColor: '#F5FCFF',\n              },\n            iconStyle:{\n                width:28,\n                height:28\n            },\n                selectedTextStyle:{\n                color:'#fb6320'\n            }\n        });\n\n        module.exports = LBRNMain;\n\n```\n2. 加载启动图片： \n\n核心代码：\n```JavaScript\n\n        var LBRNLaunchImage = React.createClass({\n\n            render(){\n               return(\n\n                 \u003cImage source={{uri:'welcome.png'}} style={styles.container} /\u003e\n               )\n            },\n            //增加定时器、请求网络数据\n            componentDidMount(){\n              setTimeout(()=\u003e{\n              this.props.navigator.replace({\n              component:LBRNMain\n              })\n              },1000)\n            }\n        })\n\n        const styles=StyleSheet.create({\n           container:{\n           flex:1\n          }\n        })\n\n        module.exports=LBRNLaunchImage;\n\n```\n3. 更多模块\n   * 错误解决\n   \u003cimg src=\"错误解决.png\" width=\"375\"\u003e\n   解决办法：\n   cd进入项目根目录执行如下安装命令：\n   ```\n   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/\n   ```\n   * 正确截图：\n  \u003cimg src=\"zongduan.png\" width=\"375\"\u003e\n   * 错误截图\n  \u003cimg src=\"错误截图.png\" width=\"375\"\u003e\n\n4. 导入文件：* ```第一种方式\n             import SmallMiddleView from './SmallMiddleView.js';\n             ```\n \n           * ```第二种方式\n             SmallMiddleView = require('SmallMiddleView');\n             ```\n5. 导航栏图片：定位position\n\n6. 传值\n\n7. 我的模块： \n  \u003cimg src=\"我的界面.png\" width=\"375\"\u003e\n\n8. 商家模块：\n  \u003cimg src=\"商家.png\" width=\"375\"\u003e\n\n9. 首页上部视图：\n  \u003cimg src=\"topView.png\" width=\"375\" \u003e\n\n\u003e 组件式开发\n\n核心代码：\n```JavaScript\n    // 当滚动动画结束之后调用此回调\n    onScrollAnimationEnd(event){\n         // Math.floor(x)获取不大于x的最大整数\n         var page = Math.floor(event.nativeEvent.contentOffset.x/width);\n         console.log(page);\n         this.setState({\n         currentPage:page\n      })\n    },\n    renderScrollViewMethod(){\n         var dataCount = homeTopMenuData;\n         var array = [];\n         for (var i=0;i\u003cdataCount.length;i++){\n            array.push(\n               \u003cLBRNHomeTopListView\n                  dataArray={homeTopMenuData[i]}\n                  key={i}\n               /\u003e\n             )\n          }\n          return array;\n    },\n    indicatorMethod(){\n         var colorsArray = [], bullColor;\n         //\u0026bull; 圆点\n         for(var i=0;i\u003c2;i++){\n               bullColor = i == this.state.currentPage ? 'orange' : '#bbb';\n               colorsArray.push(\n                 \u003cText style={[{fontSize:22,paddingRight:3}, style={color:bullColor}]} key={i}\u003e\u0026bull;\u003c/Text\u003e\n               )\n         }\n         return colorsArray;\n     }\n==============================================\n    var LBRNHomeTopListView = React.createClass({\n         getDefaultProps(){\n            return{\n               dataArray:[]\n           }\n         },\n         getInitialState(){\n            let ds = new ListView.DataSource({rowHasChanged: (r1, r2) =\u003e r1 !== r2});\n            return{\n               dataSource : ds.cloneWithRows(this.props.dataArray)\n             }\n          },\n        render(){\n            return(\n               \u003cView\u003e\n                  \u003cListView\n                      dataSource={this.state.dataSource}\n                      renderRow={this.renderRow}\n                      contentContainerStyle={styles.contentStyle}\n                      scrollEnabled={false}//设置ListView不滑动\n                   /\u003e\n\n              \u003c/View\u003e\n            )\n         },\n        //cell\n        renderRow(rowData){\n            return(\n               \u003cView style={{width:imageWH,height:imageWH,justifyContent:'center',alignItems:'center'}}\u003e\n                  \u003cImage source={{uri:rowData.image}} style={{width:imageWH - 20,height:imageWH - 20}}/\u003e\n                  \u003cText\u003e{rowData.title}\u003c/Text\u003e\n               \u003c/View\u003e\n            )\n           }\n     })\n```\n注意事项：\n```JavaScript\n    // 底部如果是ScrollView,那么根节点就是ScrollView,不要把根节点设置为View\n    \u003cScrollView\u003e\n         \u003cLBRNHomeTopView\n\n         /\u003e\n    \u003c/ScrollView\u003e\n\n    \u003cListView\n         dataSource={this.state.dataSource}\n         renderRow={this.renderRow}\n         contentContainerStyle={styles.contentStyle}\n         scrollEnabled={false}\n     /\u003e\n\n    // 要使ListView换行,要设置ListView宽度\n    contentStyle:{\n         flexDirection:'row',\n         flexWrap:'wrap',\n         width:width\n    }\n\n```\n\n10. 首页中间组件以及购物中心组件：\n\u003cimg src=\"topView.png\" width=\"375\" \u003e\n\n\u003e 组件式开发\n\n核心代码：\n```JavaScript\n\n    var LBRNHomeShopCenterView = React.createClass({\n        getDefaultProps(){\n             return{\n                dataArray:[]\n             }\n        },\n        getInitialState(){\n             let dataSource = new ListView.DataSource({rowHasChanged:(row1,row2) =\u003e row1 !== row2});\n             return{\n               dataSource:dataSource.cloneWithRows(this.props.dataArray)\n            }\n        },\n        render(){\n             return(\n                \u003cListView\n                  dataSource={this.state.dataSource}\n                  renderRow={this.renderCenterRow}\n                  contentContainerStyle={styles.contentStyle}\n        /\u003e\n\n    )\n    },\n    //cell\n    renderCenterRow(rowData,sectionID,rowID){\n           var imageMarginRight = 0;\n\n          if (this.props.dataArray.length-1 == rowID){\n              imageMarginRight = 10;\n          }\n          return(\n         \u003cView \u003e\n            \u003cView style={styles.container}\u003e\n            \u003cImage source={{uri:rowData.img}} style={{width:130,height:97,borderRadius:10,marginRight:imageMarginRight}}/\u003e\n            \u003cText style={{color:'white',position:'absolute',bottom:20,backgroundColor:'red',fontSize:16}}\u003e{rowData.showtext.text}\u003c/Text\u003e\n\n         \u003c/View\u003e\n\n         \u003cView \u003e\n             \u003cText style={{fontSize:14,fontWeight:'bold', color:'#bbb',marginTop:5,marginLeft:10,marginBottom:5}}\u003e{rowData.name}\u003c/Text\u003e\n             \u003c/View\u003e\n         \u003c/View\u003e\n      )\n     }\n    })\n    const styles = StyleSheet.create({\n          container:{\n              backgroundColor:'white',\n              marginLeft:10\n          },\n          contentStyle:{\n              flexDirection:'row',\n         }\n    })\n    module.exports=LBRNHomeShopCenterView;\n```\n\n11. 购物中心详情：\n\n    购物中心详情：回调函数，逆向传值或者是正向传值\n\n   \u003cimg src=\"购物中心详情.png\" width=\"375\" \u003e\n\n\u003e 组件式开发\n\n核心代码：\n```JavaScript\n\n    getDefaultProps(){\n         return{\n           dataArray:[],\n           popToHome:null\n    }\n    },\n\n    urlMethod(url){\n         ///处理url\n        var httpUrl=url.replace('imeituan://www.meituan.com/web/?url=','');\n\n        if (httpUrl == null)return;\n        this.props.popToHome(httpUrl);\n        //AlertIOS.alert(httpUrl);\n    }\n\n    \u003cLBRNHomeShopCenterView\n        dataArray={homeShopCenter.data}\n        popToHome={(url)=\u003ethis.popToHome(url)}///回调函数\n    /\u003e\n\n    \u003cWebView\n        automaticallyAdjustContentInsets={true}\n        source={{uri: this.state.detailUrl}}\n        javaScriptEnabled={true}\n        domStorageEnabled={true}\n        decelerationRate=\"normal\"\n        startInLoadingState={true}\n    /\u003e\n\n```\n12. 热门中心：和购物中心类似\n\n13. 猜你喜欢：\n\n    猜你喜欢：回调函数，逆向传值或者是正向传值\n\n    \u003cimg src=\"猜你喜欢.png\" width=\"375\" \u003e\n\n\u003e 组件式开发\n\n核心代码：\n```JavaScript\n    dataMethod(){\n          fetch(this.props.api_url)\n           .then((responder)=\u003eresponder.json())\n           .then(responderData=\u003e{\n              this.setState({dataSource:this.state.dataSource.cloneWithRows(responderData.data)})\n           })\n          .catch((error) =\u003e {\n             this.setState({dataSource:this.state.dataSource.cloneWithRows(homeBottomData.data)})\n         });\n    }\n\n    dealWithUrl(url){\n\n        if (url.search('w.h') == -1){\n           return url.replace('.webp','');\n        }else {\n          return url.replace('w.h','120.90')\n        }\n    }\n\n```\n=======================\n\n## 注意：如何运行本项目？\n\u003e 第一步：【npm install】\n\u003e 第二步：【react-native-link】\n\u003e 第三步：【react-native run-android】\n\u003e 如果有什么问题可以github直接提issue给我，或者留言给我\n\n## 学习心得\n\n\u003e 第一次学习ReactNative开发，感觉编写代码心里很舒畅，用JSX语句开发App，很爽快，自学ReactNative，有时间看看ReactNative中文网站资源，就拿`美团`作为练手项目，也是第一个在github上面开源项目，接下来也会深入学习，写更多的开源项目来提升自己的能力。\n   也会不断更新笔记。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flb2281075105%2Flbrnmeituan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flb2281075105%2Flbrnmeituan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flb2281075105%2Flbrnmeituan/lists"}