1.创建MineHeaderView.js

/**
* 个人中心头部内容
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native'; // 导入系统类
var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width; // ES5
var HeaderView = React.createClass({
render() {
return (
<View style={styles.container}>
{this.renderTopView()}
{this.renderBottomView()}
</View>
);
}, renderTopView(){
return(
<View style={styles.topViewStyle}>
<Image source={{uri:'see'}} style={styles.leftIconStyle} />
<View style={styles.conterViewStyle}>
<Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>京东电商</Text>
<Image source={{uri:'avatar_vip'}} style={{width:17,height:17}} />
</View>
<Image source={{uri:'icon_cell_rightArrow'}} style={{width:8,height:13,marginRight:8}} />
</View>
)
},
renderBottomView(){
return(
<View style={styles.bottomViewStyle}>
{this.renderBottomItem()}
</View>
)
}, renderBottomItem(){
// 组件数组
var items = [];
// 数据
var dataArr = [{'number':'100', 'title':'购物券'},{'number':'12', 'title':'评价'},{'number':'50', 'title':'收藏'}];
// 遍历创建组件转入数组
for (var i=0;i<dataArr.length;i++){
var data = dataArr[i];
items.push(
<TouchableOpacity key={i}>
<View style={styles.bottomInnerViewStyle}>
<Text style={{color:'white'}}>{data.number}</Text>
<Text style={{color:'white'}}>{data.title}</Text>
</View>
</TouchableOpacity>
);
}
return items;
},
}); const styles = StyleSheet.create({
container: {
height:200,
backgroundColor:'rgb(255,96,0)'
},
topViewStyle:{
flexDirection:'row',
marginTop:80,
alignItems:'center',
justifyContent:'space-around'
},
leftIconStyle:{
width:70,
height:70,
borderRadius:35,
borderWidth:3,
borderColor:'rgba(0,0,0,0.2)',
},
conterViewStyle:{
flexDirection:'row',
width:screenW * 0.6,
},
bottomViewStyle:{
flexDirection:'row',
position:'absolute',
bottom:0,
},
bottomInnerViewStyle:{
width:(screenW/3)+1,
height:40,
backgroundColor:'rgba(255,255,255,0.4)', justifyContent:'center',
alignItems:'center', borderRightWidth:1,
borderRightColor:'white'
}
}); // 输出
module.exports = HeaderView;

2.Mine.js使用这个组件

/**
* 我的
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native'; /*======导入外部组件类======*/
var MyCell = require('./CommonMyCell');
var MiddleView = require('./MineMiddleView');
var HeaderView = require('./MineHeaderView'); // ES5
var Mine = React.createClass({
render() {
return (
<ScrollView style={styles.scrollViewStyle}>
<HeaderView />
<View style={{marginTop:20}}>
<MyCell
leftIconName="collect"
leftTitle="我的订单"
rightTitle="查看全部订单"
/>
<MiddleView />
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="draft"
leftTitle="钱包"
rightTitle="账号余额:¥100.88"
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="voucher"
leftTitle="抵用券"
rightTitle="10张"
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="mall"
leftTitle="积分商城"
rightTitle=""
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="recommend"
leftTitle="今日推荐"
rightTitle=""
/>
</View>
</ScrollView>
);
}
}); const styles = StyleSheet.create({
scrollViewStyle:{ }
}); // 输出
module.exports = Mine;

3.效果图

React Native商城项目实战11 - 个人中心头部内容的更多相关文章

  1. React Native商城项目实战10 - 个人中心中间内容设置

    1.新建一个MineMiddleView.js,专门用于构建中间的内容 /** * 个人中心中间内容设置 */ import React, { Component } from 'react'; im ...

  2. React Native商城项目实战09 - 个人中心自定义cell

    1.新建组件CommonMyCell.js /** * 个人中心自定义cell */ import React, { Component } from 'react'; import { AppReg ...

  3. React Native商城项目实战12 - 首页头部内容

    1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...

  4. React Native商城项目实战04 - 封装TabNavigator.Item的创建

    1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...

  5. React Native商城项目实战02 - 主要框架部分(tabBar)

    1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...

  6. React Native商城项目实战01 - 初始化设置

    1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...

  7. React Native商城项目实战07 - 设置“More”界面导航条

    1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...

  8. React Native商城项目实战05 - 设置首页的导航条

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  9. React Native商城项目实战06 - 设置安卓中的启动页

    1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...

随机推荐

  1. JS之理解继承

    JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...

  2. 【7.10校内test】T1高级打字机

    [题目链接luogu] 这是T1,但是是神仙T1: 对于前100%的数据很好写,直接数组模拟就可以了: (当然也有栈模拟的,据说有模拟炸了的) //50pts#include<bits/stdc ...

  3. [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆)

    [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆) 题面 有一个装球机器,构造可以看作是一棵树.有下面两种操作: 从根放入一个球,只要下方有空位,球会沿着树滚下.如果 ...

  4. Java中的四种权限修饰符

    权限修饰符   public protected [default] private 同一个类 YES YES YES YES 同一个包 YES YES YES NO 不同包子类 YES YES NO ...

  5. Dire Wolf——HDU5115(区间DP)

    题意 就是有一对狼,每个狼有初始的攻击力,并且还能给左右两边的狼提供攻击力加成,当冒险家杀死一头狼的时候他也会受到这个狼目前攻击力的伤害 实例解析 33 5 78 2 0 有三头狼,刚开始第二头狼给他 ...

  6. 02.AutoMapper 之扁平化(Flattening)

    https://www.jianshu.com/p/65099590c930   扁平化(Flattening) 对象映射器的常见用法是将一个复杂对象模型扁平化为一个简单模型.例如您有一个以下复杂模型 ...

  7. 广播即时通信src和des

    package 第十二章; import java.io.IOException; import java.net.DatagramPacket; import java.net.InetAddres ...

  8. css实现斑马线效果

    文本实现斑马线效果 <style> p { font-size: 17px; line-height: 25px; background-color: antiquewhite; back ...

  9. es6 generator函数的异步编程

    es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数    将函数 ...

  10. [IIS]修改MaxFieldLength与MaxRequestBytes彻底解决Request Too Long的问题

    当 IIS7/7.5 收到的请求头的长度超过16K(默认值),就会引发"Bad Request - Request Too Long. HTTP Error 400. The size of ...