lb2281075105 / Lbrnmeituan
Licence: apache-2.0
ReactNative 仿美团项目
Stars: ✭ 84
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Lbrnmeituan
React Three Flex
💪📦 Flexbox for react-three-fiber
Stars: ✭ 764 (+809.52%)
Mutual labels: flex, flexbox
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-1.19%)
Mutual labels: android-app, ios-app
Sprite Flex Layout
grid-layout is a layout engine which implements flex, can use in canvas/node-canvas
Stars: ✭ 15 (-82.14%)
Mutual labels: flex, flexbox
Chatter App
This is a flutter based modern messaging app where users can sign up and log in to chat with their friends, family, colleagues among groups with enriched User-Experience.
Stars: ✭ 80 (-4.76%)
Mutual labels: android-app, ios-app
React Native Nw React Calculator
Mobile, desktop and website Apps with the same code
Stars: ✭ 5,116 (+5990.48%)
Mutual labels: android-app, ios-app
React Natives App
App for the React & React Native developer community as a demo project for the React Native meetups in Germany
Stars: ✭ 20 (-76.19%)
Mutual labels: android-app, ios-app
Flutter One App
🎊Flutter 仿「ONE·一个」APP,兼容Android、iOS双平台,Flutter的练手学习,覆盖了各种基本控件使用、下拉刷新上拉加载、HTML解析、音乐播放、图片预览下载、权限申请等,使用Android Studio的FlutterJsonBeanFactory插件完成JSON转Dart实体
Stars: ✭ 316 (+276.19%)
Mutual labels: android-app, ios-app
Open Source Flutter Apps
📱 List of open source Flutter applications
Stars: ✭ 1,086 (+1192.86%)
Mutual labels: android-app, ios-app
Space Curiosity
All space related agregator, built with Flutter - Spark your curiosity!
Stars: ✭ 56 (-33.33%)
Mutual labels: android-app, ios-app
Material Kit React Native
Material Kit React Native
Stars: ✭ 424 (+404.76%)
Mutual labels: android-app, ios-app
Flutter Tetris
a tetris game powered by flutter. 使用flutter开发俄罗斯方块。
Stars: ✭ 1,109 (+1220.24%)
Mutual labels: android-app, ios-app
Bangumi
💫 An unofficial bgm.tv app client for Android and iOS, built with React Native. 类似专门做ACG的豆瓣, 已适配 iOS/Android, mobile/Pad, light/dark theme, 并加入了很多独有的增强功能
Stars: ✭ 409 (+386.9%)
Mutual labels: android-app, ios-app
Kotlin Native Superhero App
Android and iOS master detail application for list Marvel Super Heroes
Stars: ✭ 15 (-82.14%)
Mutual labels: android-app, ios-app
Aawazein
A News Application 🗞️ built under 24 hours ⏰. It is built 🚧 with React Native ⚛️. 🚀 and 3 cups of Chai ☕
Stars: ✭ 28 (-66.67%)
Mutual labels: ios-app, android-app
React Flexview
A powerful React component to abstract over flexbox and create any layout on any browser
Stars: ✭ 276 (+228.57%)
Mutual labels: flex, flexbox
Gas Oil Mixture Mobile
Mobile app for calculation of gasoline/oil ratio for 2 stroke engines built with React Native.
Stars: ✭ 61 (-27.38%)
Mutual labels: android-app, ios-app
LBRNMeiTuan
ReactNative 仿美团项目
- 仿美团项目:首先设置标签栏和导航栏
核心代码:
var LBRNMain = React.createClass({
getInitialState(){
return {
selectedTab:'Home'
}
},
render() {
return (
<TabNavigator>
{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)}
</TabNavigator>
);
},
childNavigetor(title,tabName,normalImage, selectedImage,componentName,component){
return (
<TabNavigator.Item
selectedTitleStyle={styles.selectedTextStyle}
selected={this.state.selectedTab === tabName}
title={title}
renderIcon={() => <Image source={{uri:normalImage}} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.iconStyle} />}
onPress={() => this.setState({ selectedTab: componentName })}>
<Navigator
initialRoute={{ name: componentName, component: component }}
configureScene={(route) => {
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.passProps} navigator={navigator} />
}}
/>
</TabNavigator.Item>
)
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
iconStyle:{
width:28,
height:28
},
selectedTextStyle:{
color:'#fb6320'
}
});
module.exports = LBRNMain;
- 加载启动图片:
核心代码:
var LBRNLaunchImage = React.createClass({
render(){
return(
<Image source={{uri:'welcome.png'}} style={styles.container} />
)
},
//增加定时器、请求网络数据
componentDidMount(){
setTimeout(()=>{
this.props.navigator.replace({
component:LBRNMain
})
},1000)
}
})
const styles=StyleSheet.create({
container:{
flex:1
}
})
module.exports=LBRNLaunchImage;
- 更多模块
- 错误解决
-
导入文件:*
第一种方式 import SmallMiddleView from './SmallMiddleView.js';
* ```第二种方式 SmallMiddleView = require('SmallMiddleView'); ```
-
导航栏图片:定位position
-
传值
-
我的模块:
- 商家模块:
- 首页上部视图:
组件式开发
核心代码:
// 当滚动动画结束之后调用此回调
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<dataCount.length;i++){
array.push(
<LBRNHomeTopListView
dataArray={homeTopMenuData[i]}
key={i}
/>
)
}
return array;
},
indicatorMethod(){
var colorsArray = [], bullColor;
//• 圆点
for(var i=0;i<2;i++){
bullColor = i == this.state.currentPage ? 'orange' : '#bbb';
colorsArray.push(
<Text style={[{fontSize:22,paddingRight:3}, style={color:bullColor}]} key={i}>•</Text>
)
}
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(
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={styles.contentStyle}
scrollEnabled={false}//设置ListView不滑动
/>
</View>
)
},
//cell
renderRow(rowData){
return(
<View style={{width:imageWH,height:imageWH,justifyContent:'center',alignItems:'center'}}>
<Image source={{uri:rowData.image}} style={{width:imageWH - 20,height:imageWH - 20}}/>
<Text>{rowData.title}</Text>
</View>
)
}
})
注意事项:
// 底部如果是ScrollView,那么根节点就是ScrollView,不要把根节点设置为View
<ScrollView>
<LBRNHomeTopView
/>
</ScrollView>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={styles.contentStyle}
scrollEnabled={false}
/>
// 要使ListView换行,要设置ListView宽度
contentStyle:{
flexDirection:'row',
flexWrap:'wrap',
width:width
}
- 首页中间组件以及购物中心组件:
组件式开发
核心代码:
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(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCenterRow}
contentContainerStyle={styles.contentStyle}
/>
)
},
//cell
renderCenterRow(rowData,sectionID,rowID){
var imageMarginRight = 0;
if (this.props.dataArray.length-1 == rowID){
imageMarginRight = 10;
}
return(
<View >
<View style={styles.container}>
<Image source={{uri:rowData.img}} style={{width:130,height:97,borderRadius:10,marginRight:imageMarginRight}}/>
<Text style={{color:'white',position:'absolute',bottom:20,backgroundColor:'red',fontSize:16}}>{rowData.showtext.text}</Text>
</View>
<View >
<Text style={{fontSize:14,fontWeight:'bold', color:'#bbb',marginTop:5,marginLeft:10,marginBottom:5}}>{rowData.name}</Text>
</View>
</View>
)
}
})
const styles = StyleSheet.create({
container:{
backgroundColor:'white',
marginLeft:10
},
contentStyle:{
flexDirection:'row',
}
})
module.exports=LBRNHomeShopCenterView;
-
购物中心详情:
购物中心详情:回调函数,逆向传值或者是正向传值
组件式开发
核心代码:
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);
}
<LBRNHomeShopCenterView
dataArray={homeShopCenter.data}
popToHome={(url)=>this.popToHome(url)}///回调函数
/>
<WebView
automaticallyAdjustContentInsets={true}
source={{uri: this.state.detailUrl}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
/>
组件式开发
核心代码:
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上面开源项目,接下来也会深入学习,写更多的开源项目来提升自己的能力。 也会不断更新笔记。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].