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. kernel编译

    Linux内核编译与安装 Linux内核介绍 Linux内核是一个用C语言写成的,符合POSIX标准的类Unix操作系统.内核是操作系统中最基本的一部分,提供了众多应用程序访问计算机硬件的机制.Lin ...

  2. 面向对象super 练习

    看代码写结果[如果有错误,则标注错误即可,并且假设程序报错可以继续执行] class Foo(object): a1 = 1 def __init__(self,num): self.num = nu ...

  3. python列表,字典,集合

    初识模块 import sys print(sys.path)#查看化境变量 print(sys.argv)#查看文件的相对路径,但是在pachrm中 会自动转为绝对路径 import os #os. ...

  4. python 元组及操作

    # 元组是'不可变'的 list 使用小括号 创建后不允许修改 # 创建# t = ('a','b','c',1,2,3)# print(t)# print(type(t))# # 3# print( ...

  5. Python 入门之 Python三大器 之 装饰器

    Python 入门之 Python三大器 之 装饰器 1.开放封闭原则: (1)代码扩展进行开放 ​ 任何一个程序,不可能在设计之初就已经想好了所有的功能并且未来不做任何更新和修改.所以我们必须允许代 ...

  6. Ruby下安装cocoapods

    常规安装:(文末:特殊安装) 注: 1.Mac OS X EI Capitan 10.11中需要更改安装路劲: sudo gem install -n /usr/local/bin cocoapods ...

  7. redis防止抢购商品超卖

    前言: redis不仅仅是单纯的缓存,它还有一些特殊的功能,在一些特殊场景上很好用. 本篇博文用来测试下使用redis来防止抢购商品超卖问题. 内容: 使用redis的list进行测试 思路是设置一个 ...

  8. ntsysv - 用于配置运行级别的简单接口

    总览 SYNOPSIS ntsysv [--back] [--level <levels>] 描述 DESCRIPTION ntsysv 是个用于配置运行级别服务(也可通过 chkconf ...

  9. flutter 布局简介

    import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget ...

  10. 去掉windows換行符^M

    在命令模式下运行命令 :%s/^M//g 回车注意:里面的^M 必须是同时按 Ctrl+V+M ,表示回车.不是直接输入 ^M,也不是粘帖复制.命令完成后,用:x 保存退出后,再次用vi打开就全部被替 ...