React-Native之仿携程App首页布局

最新推荐文章于 2024-08-10 08:00:05 发布
最新推荐文章于 2024-08-10 08:00:05 发布
阅读量2.7w 收藏 6
点赞数 5
分类专栏： react-native 文章标签： react-native View Text Image 广告轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai_qing_xu_kong/article/details/72793846
版权

转载请标明出处:
http://blog.csdn.net/hai_qing_xu_kong/article/details/72793846
本文出自：【顾林海的博客】

前言

本篇介绍React-Native中的View、Text和Image组件的使用，并利用这三个组件编写一个简单的菜单，如果大家看过《React Native入门实战》这本书的话，在这本书的第三章开篇就有这个例子，但是大家如果使用的是React Native最新版本 0.44，会发现书中的例子根本跑不通，因此本篇文章的例子基于最新版本0.44，重新改写了这个例子，并在原有的基础上补充完整。好了我们先来看看这个九宫格菜单的效果：

这里写图片描述

属性讲解

从效果图中可以看出上面菜单分为3个栏目，每个栏目平分屏幕宽度，在每个栏目的第二和第三列平分栏目的高度形成上下两栏菜单。

由于这三个栏目的样式是一样的，所以我们只要画出其中一个就可以了，每一栏的特点如下：

  1. 水平排列
  2. 设定高度
  3. 距离屏幕左右边以及上边的距离
  4. 圆角
  5. 背景色

编写栏目的样式：

const styles=StyleSheet.create({
  containertop:{
    marginTop:15,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    borderRadius:5,
    backgroundColor:'#FF0067',
  }

});

marginTop距离上方15pt，marginLeft距离左边5pt，marginRight距离右边5pt，height用于设置组件的高度，flexDirection:’row’ 代表了组件的排列方式，属性row表示横向排列，column表示纵向排列，默认是column，borderRadius代表圆角为5，并且设置了背景色为‘#FF0067‘。

接着编写栏目的视图，这里用到View、Text组件，因此需要我们加载这两个组件：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

export default class ReactDeomo01 extends Component {
  render(){
      return(      
          <View style={styles.containertop}>

          </View>
      );
  }
}

const styles=StyleSheet.create({
  containertop:{
    marginTop:15,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    borderRadius:5,
    backgroundColor:'#FF0067',
  }

});

AppRegistry.registerComponent('ReactDeomo01', () => ReactDeomo01);

运行效果如下：

这里写图片描述

横向的菜单设置如下：

  • 平分屏幕剩余宽度
  • 文字大小
  • 文字颜色
  • 居中

修改代码如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  PixelRatio
} from 'react-native';

export default class ReactDeomo01 extends Component {
  render(){
      return(      
        <View style={styles.flex}>
          <View style={styles.containertop}>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>item1</Text>
            </View>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>item2</Text>
            </View>
            <View style={[styles.item,styles.center]}>
               <Text style={styles.font}>item3</Text>
            </View>
          </View>


        </View>
      );
  }
}

const styles=StyleSheet.create({
  containertop:{
    marginTop:15,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    borderRadius:5,

    backgroundColor:'#FF0067',
  },
  item:{
    flex:1,
    height:80,
  },
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  flex:{
    flex:1
  },
  font:{
    color:'#fff',
    fontSize:16,

  }
});

AppRegistry.registerComponent('ReactDeomo01', () => ReactDeomo01);

由于内部3个View组件是水平布局的，View组件的flex属性设置为1，所以平分屏幕宽度，内部View组件height高度设置80，justifyContent设置为center在交叉轴的中间，alignItems设置为center水平居中，最里面是Text组件，设置了color颜色为’#fff’，文字fontSize大小为16，fontWeight设置为粗体。

运行效果如下：

这里写图片描述

接下来添加线条，这里引入PixelRatio API，PixelRatio的get方法用于获取设备的像素比，这里1/PixelRatio.get()获取最小线宽。

新增样式如下：

 lineLeftRight:{
    borderLeftWidth:1/PixelRatio.get(),
    borderRightWidth:1/PixelRatio.get(),
    borderColor:'#fff'
  },

borderLeftWidth是左边框的宽度，borderRightWidth是右边框的宽度，线宽颜色borderColor为’#fff’

修改代码如下：

export default class ReactDeomo01 extends Component {
  render(){
      return(      
        <View style={styles.flex}>
          <View style={styles.containertop}>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>item1</Text>
            </View>
            <View style={[styles.item,styles.center,styles.lineLeftRight]}>
              <Text style={styles.font}>item2</Text>
            </View>
            <View style={[styles.item,styles.center]}>
               <Text style={styles.font}>item3</Text>
            </View>
          </View>


        </View>
      );
  }
}

运行效果如下：

这里写图片描述

Image组件用于显示图片，加载方式分为两种，本地和网络加载。

本地加载:

<Image source={require('./img/plane-icon.png')} style={styles.image}/>

./img/plane-icon.png表示同级目录下的img目录下的plane-icon.png图片。

网络加载：

<Image source={{uri: 'http://cdn8.staztic.com/app/i/5140/5140559/comgotohzhztourapp-1-l-124x124.png'}} style={styles.image}/>

这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。我们启动npm命令行，在项目的根目录使用如下命令安装模块。


$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save

到这里相关的属性讲解完毕，最后做的就是将这些组件拼接在一起，下面是完整的源码：

import React, { Component } from 'react';

var Swiper = require('react-native-swiper');

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  PixelRatio,
  ScrollView,
} from 'react-native';

var sliderImgs = [
  'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
  'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
  'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];

var imageUrl = [
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png',
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/feiji.png',
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/lvyou.png',
];

var Slider = React.createClass({
    render: function(){
      return (
        <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={80} showsPagination={false}>
          <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
          <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
          <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
        </Swiper>
      );
    }
});


export default class ReactDeomo01 extends Component {

  render(){
      return(
      <ScrollView>
        <View style={{flex:1}}>
        <Slider/>      
        <View style={styles.flex}>
          <View style={[styles.containertop,styles.sbu_red,styles.topradius]}>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>酒店</Text>
              <Image source={{uri: imageUrl[0]}} style={styles.image}/>
            </View>
            <View style={[styles.item,styles.lineLeftRight]}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
                <Text style={styles.font}>海外酒店</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
                <Text style={styles.font}>特价酒店</Text>
              </View>
            </View>
            <View style={styles.item}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
               <Text style={styles.font}>团购</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
               <Text style={styles.font}>名宿·短租</Text>
              </View>
            </View>
          </View>

          <View style={[styles.containermiddle,styles.sbu_blue]}>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>机票</Text>
              <Image source={{uri: imageUrl[1]}} style={styles.image}/>
            </View>
            <View style={[styles.item,styles.lineLeftRight]}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
                <Text style={styles.font}>火车票</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
                <Text style={styles.font}>特价机票</Text>
              </View>
            </View>
            <View style={styles.item}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
               <Text style={styles.font}>汽车票·船票</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
               <Text style={styles.font}>专车·租车</Text>
              </View>
            </View>
          </View>

          <View style={[styles.containermiddle,styles.sbu_green]}>
            <View style={[styles.item,styles.center]}>
              <Text style={styles.font}>旅游</Text>
              <Image source={{uri: imageUrl[2]}} style={styles.image}/>
            </View>
            <View style={[styles.item,styles.lineLeftRight]}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
                <Text style={styles.font}>目的地攻略</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
                <Text style={styles.font}>周边游</Text>
              </View>
            </View>
            <View style={styles.item}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
               <Text style={styles.font}>邮轮旅行</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
               <Text style={styles.font}>定制旅行</Text>
              </View>
            </View>
          </View>

          <View style={[styles.containermiddle,styles.sbu_yellow,styles.bottomradius]}>
             <View style={styles.item}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
               <Text style={styles.font}>景点·玩乐</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
               <Text style={styles.font}>礼品卡</Text>
              </View>
            </View>
            <View style={[styles.item,styles.lineLeftRight]}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
                <Text style={styles.font}>美食林</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
                <Text style={styles.font}>WiFi·电话卡</Text>
              </View>
            </View>
            <View style={styles.item}>
              <View style={[styles.center,styles.flex,styles.lineCenter]}>
               <Text style={styles.font}>购物·外汇</Text>
              </View>
              <View style={[styles.center,styles.flex]}>
               <Text style={styles.font}>保险·签证</Text>
              </View>
            </View>
          </View>

          <View style={[styles.secondmenu]}>
            <View style={[{flexDirection:'row'},styles.menulineCenter]}>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon1.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>自由行</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon2.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>微领队</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon3.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>一日游</Text>
              </View>
              <View style={[styles.item,styles.center]}>
                <Image source={require('./img/icon4.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>高端游</Text>
              </View>
            </View>
            <View style={[{flexDirection:'row'},styles.menulineCenter]}>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon4.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>酒店+景点</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon3.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>海外玩乐</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon2.png')}style={styles.secondimage}/>
                <Text style={styles.secondfont}>寄存·托运</Text>
              </View>
              <View style={[styles.item,styles.center]}>
                <Image source={require('./img/icon1.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>加盟合作</Text>
              </View>
            </View>
            <View style={{flexDirection:'row'}}>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon1.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>外币兑换</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon2.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>当季去哪</Text>
              </View>
              <View style={[styles.item,styles.center,styles.menulineRight]}>
                <Image source={require('./img/icon3.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>机场停车</Text>
              </View>
              <View style={[styles.item,styles.center]}>
                <Image source={require('./img/icon4.png')} style={styles.secondimage}/>
                <Text style={styles.secondfont}>更多服务</Text>
              </View>
            </View>
          </View>

          <View style={{height:30}}></View>

        </View>

        </View>

      </ScrollView>
      );
  }
}

const styles=StyleSheet.create({

  sbu_red:{
      backgroundColor: '#FA6778',
      borderColor:'#FA6778',
    },

    sbu_blue:{
      backgroundColor: '#3D98FF',
      borderColor:'#3D98FF',
    },

    sbu_green:{
      backgroundColor: '#5EBE00',
      borderColor:'#5EBE00',
    },

    sbu_yellow:{
      backgroundColor: '#FC9720',
      borderColor:'#FC9720',
    },
   containertop:{
    marginTop:5,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    padding:2,
  },
  topradius:{
    borderTopLeftRadius:5,
    borderTopRightRadius:5
  },
  bottomradius:{
    borderBottomLeftRadius:5,
    borderBottomRightRadius:5
  },
  containermiddle:{
    marginTop:5,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    padding:2,
    backgroundColor:'#FF0067',
  },
  secondmenu:{
    marginTop:5,
    marginLeft:5,
    marginRight:5,
    backgroundColor:'white'
  },
  item:{
    flex:1,
    height:80,
  },
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  flex:{
    flex:1
  },
  font:{
    color:'#fff',
    fontSize:14,
  },
  secondfont:{
    color:'black',
    fontSize:10,
  },
  lineLeftRight:{
    borderLeftWidth:1/PixelRatio.get(),
    borderRightWidth:1/PixelRatio.get(),
    borderColor:'#fff'
  },

  lineCenter:{
    borderBottomWidth:1/PixelRatio.get(),
    borderColor:'#fff'
  },
  menulineRight:{
    borderRightWidth:0.5/PixelRatio.get(),
    borderColor:'#d0d0d0'
  },

  menulineCenter:{
    borderBottomWidth:1/PixelRatio.get(),
    borderColor:'#d0d0d0'
  },
  image:{
    width:30,
    height:30,
    marginTop:5
  },
  secondimage:{
    width:20,
    height:20,
    marginBottom:4
  },
  wrapper: {
      height:80,
    },
  slide: {
    height:80,
    resizeMode: Image.resizeMode.contain,
  },

});


AppRegistry.registerComponent('ReactDeomo01', () => ReactDeomo01);

注意：这里图片是在同级img目录下，没有这个目录请创建这个目录，最后要记得往里面添加照片！！！

关于React Native的布局请查看《 React-Native中的flexbox布局的使用》

IT界的吉祥物
关注
专栏目录
原生、混合、react-native应用对比分析
iOS_Manguoge的博客
03-12 9364
原生开发是系统自带的app开发方式，也是大部分人最熟悉app开发的技术，如android、ios、wp。 H5开发是Html5开发的app，本质上运行在手机浏览器中的页面，一般使用app做一个壳套用浏览器运行H5的页面，由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。react-native是用react 进行原生app开发的框架，让广大开发者使用js和react开发应用，提倡组件化开发
【独家】React Native 版本升级指南
卤蛋实验室
08-26 1116
前言 React Native 作为一款跨端框架，有一个最让人头疼的问题，那就是版本更新。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。 本文假定 React Native 升级的主导者是前端同学，比较熟悉 javaScript 为主的一套前端构建流程。如果有条件，升级时强烈建议拉上 iOS 和 Android 开发，对于一些琐碎的升级细节，当面沟通远比搜索.
react-native模仿京东首页
02-17
react-native模仿京东首页，欢迎下载交流。
ReactNative官网例子练习——（一）
mingyunxiaohai的专栏
08-31 702
学一个变成语言，一般我们都先完成一个hellowrold。这就不写了，然后根据Rn官网的顺序 我们需要了解 Props(属性)和State(状态)         Props 属性用于定制一些必要的参数         State 可以动态的改变一些状态 一般在构造方法中初始化 constructor中。 小例子： /** * Sample React Native App * htt
探索文艺生活：基于React-Native的高仿「ONE·一个」APP
最新发布
gitblog_00754的博客
08-10 288
探索文艺生活：基于React-Native的高仿「ONE·一个」APP ReactNativeOne基于React-Native的高仿「ONE·一个」，兼容Android、iOS双平台（由于接口原因，该代码库不再更新）项目地址:https://gitcode.com/gh_mirrors/re/ReactNativeOne 在数字化的世界里，文艺与科技的结合总能带来意想不到的惊喜。今天，我们要介...
React Native仿某电商店铺首页
vv_bug
08-26 4227
前言：有朋友需要实现一个仿某电商app店铺首页的效果，花了一点点时间简单的实现了一下，最后的效果大概是这样的：1、可以看到，当底部的滑动控件滑动的时候tabview滑动到指定的位置后悬浮。 2、当底部的滑动控件滑动的时候状态栏view透明度从0到1的转变。 3、当底部的滑动控件滑动的时候背景view需要根据滑动的距离缩放最后跟状态栏view重合。当然，需求远不止这些，我只是简单的实现了一下功能，
RN开发实践——仿携程App（一）
CTSN的博客
08-08 3961
React-Native开发实践
RN开发实践——仿携程App（三）
CTSN的博客
08-10 1048
React Native开发实践三
携程是如何去做React-Native优化的
06-07
根据携程的使用情况，其App从2015年5月开始使用React-Native，到2016年4月已经进行了规模化使用，并且在应用中已经引入了60+页面。在这一过程中，携程对于React-Native框架进行了一系列的优化工作，以确保应用能够...
2015年7月18日oschina 杭州分享 React-Native开发原生iOSApp携程vczero.ppt
09-20
【React-Native开发原生iOSApp】是一种技术实践，它允许开发者使用JavaScript和React库来构建原生的iOS应用程序。这种技术由Facebook推出，旨在实现一次编写，多平台运行的目标，减少开发者为不同操作系统编写单独...
【稀饭】react native 系列教程之已有项目接入React Native
画虎烂的专栏
10-11 7344
概述本文是基于目前公司的一个真实项目编写的，由于是边实践边记录，遇到什么问题和如何解决的，所以你看这篇文章的时候，可能有时候会觉得不是很流畅，特此说明。引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'react-native的res使用到了23sdk的资源，因此编译的sdk要求是23compileSdkVe
仿携程网手机端
06-14
仿携程网手机端页面，有需要的朋友可以下载使用，谢谢
react-CRN是CtripReactNative简称由携程无线平台研发团队基于ReactNative框架优化
08-15
CRN是Ctrip React Native简称，由携程无线平台研发团队基于React Native框架优化，定制成稳定性和性能更佳、也更适合业务场景的跨平台开发框架。
android仿携程客户端界面实现
10-13
android仿携程客户端界面实现。
React Native商城项目实战14 - 首页中间下部分
weixin_33841722的博客
08-20 95
1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'...
RN开发实践——仿携程App（四）
CTSN的博客
08-11 1331
React Native 开发实践四
React Native之仿今日头条首页
jj120522的专栏
07-31 7806
今日头条应用想必大家应该都不陌生，绝对称得上今日之星。媒体上面已经所向披靡，PK掉微信公众号是迟早的事情，我祝今日头条再创辉煌！       首先我们先看下今日头条的首页：              这里提到一个开源框架：react-native-scrollable-tab-view，类似于安卓中的ViewPagerIndicator+ViewPager等,下面我简单介绍下如何应用以及如何
android游戏开发！为了跳槽强刷1000道Android真题，面试必问
m0_52308677的博客
03-05 1310
前言 经常在群里听到大家对Android抱有一些消极的态度，说Android凉了，想要换个方向，但是如果换个方向就能变成大牛的话，那大家都换就好了。 其实任何方向都存在”二八“定律，总有20%混的很好的人，我们要努力成为那20%，所以对自己的要求要逐渐提高，走出舒适区，尝试破局！ 现在已经不能停留在熟练使用RxJava,Retrofit,OkHttp以及各种图片库了，而是要源码级彻底掌握他们。要清楚，一个库再牛逼，那也是作者牛逼，所以我们要尽可能懂其中的原理。 给大家几个建议哈，首先要耐得住寂寞，不要被外界
10天用Flutter撸了个高仿携程App，挑战华为社招
m0_66803446的博客
04-01 280
最近看到群里看到一个女生，讲述了她从开始选择Android，经过非常努力的学习和挣扎，然而最后面对当前的环境却不得不放弃。看完以后真的非常替她感觉惋惜，如果早几年入行可能结果会比现在好很多，但可惜，这就是现实。 这是一个做精品的时代了，不是当年出个产品就能拉投资骗点击的时代了。精品需要的是更专业的人才，也就是对APP开发人员的素质要求会更高，这个市场会回归一个正常的节奏，拿多少钱就是看能力，看产品。 饿了么Android岗一面 1：双亲委托机制？ 2：插件化原理？ 3：垃圾回收机制及其优缺点？ 4：P.
React-Native国际化实践：react-native-i18n库解析与使用
"React-Native-i18n是一个用于React-Native应用的全球化多语言切换工具库，方便开发者实现应用程序的国际化。它支持iOS和Android平台，并且无需原生模块，具有良好的可移植性。库的使用主要包括安装和在项目中的应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值