https://github.com/lb2281075105/lbrnmeituan
ReactNative 仿美团项目
https://github.com/lb2281075105/lbrnmeituan
android-app flex flexbox ios-app react react-native
Last synced: 11 months ago
JSON representation
ReactNative 仿美团项目
- Host: GitHub
- URL: https://github.com/lb2281075105/lbrnmeituan
- Owner: lb2281075105
- License: apache-2.0
- Created: 2017-05-17T00:40:34.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-14T13:03:03.000Z (about 6 years ago)
- Last Synced: 2025-04-04T05:41:55.490Z (over 1 year ago)
- Topics: android-app, flex, flexbox, ios-app, react, react-native
- Language: JavaScript
- Size: 11.4 MB
- Stars: 85
- Watchers: 4
- Forks: 28
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LBRNMeiTuan
ReactNative 仿美团项目
1. 仿美团项目：首先设置标签栏和导航栏
核心代码：
```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. 更多模块
* 错误解决
解决办法：
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/
```
* 正确截图：
* 错误截图
4. 导入文件：* ```第一种方式
import SmallMiddleView from './SmallMiddleView.js';
```
* ```第二种方式
SmallMiddleView = require('SmallMiddleView');
```
5. 导航栏图片：定位position
6. 传值
7. 我的模块：
8. 商家模块：
9. 首页上部视图：
> 组件式开发
核心代码：
```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
)
}
return array;
},
indicatorMethod(){
var colorsArray = [], bullColor;
//• 圆点
for(var i=0;i<2;i++){
bullColor = i == this.state.currentPage ? 'orange' : '#bbb';
colorsArray.push(
•
)
}
return colorsArray;
}
==============================================
var LBRNHomeTopListView = React.createClass({
getDefaultProps(){
return{
dataArray:[]
}
},
getInitialState(){
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return{
dataSource : ds.cloneWithRows(this.props.dataArray)
}
},
render(){
return(
)
},
//cell
renderRow(rowData){
return(
{rowData.title}
)
}
})
```
注意事项：
```JavaScript
// 底部如果是ScrollView,那么根节点就是ScrollView,不要把根节点设置为View
// 要使ListView换行,要设置ListView宽度
contentStyle:{
flexDirection:'row',
flexWrap:'wrap',
width:width
}
```
10. 首页中间组件以及购物中心组件：
> 组件式开发
核心代码：
```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;
```
11. 购物中心详情：
购物中心详情：回调函数，逆向传值或者是正向传值
> 组件式开发
核心代码：
```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)}///回调函数
/>
```
12. 热门中心：和购物中心类似
13. 猜你喜欢：
猜你喜欢：回调函数，逆向传值或者是正向传值
> 组件式开发
核心代码：
```JavaScript
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')
}
}
```
=======================
## 注意：如何运行本项目？
> 第一步：【npm install】
> 第二步：【react-native-link】
> 第三步：【react-native run-android】
> 如果有什么问题可以github直接提issue给我，或者留言给我
## 学习心得
> 第一次学习ReactNative开发，感觉编写代码心里很舒畅，用JSX语句开发App，很爽快，自学ReactNative，有时间看看ReactNative中文网站资源，就拿`美团`作为练手项目，也是第一个在github上面开源项目，接下来也会深入学习，写更多的开源项目来提升自己的能力。
也会不断更新笔记。