RN笔记-搭建'我的'模块

'我的'模块主要由3个组件组合而成：MineHeaderView、MineMiddleView、CommonMyCell

页面效果图：

我的.png

组合的页面源码：

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

// 导入外部的组件
var MyCell = require('./XMGCommonMyCell');
var MineMiddleView = require('./XMGMineMiddleView');
var MineHeaderView = require('./XMGMineHeaderView');

var Mine = React.createClass({
  render() {
    return (
      <ScrollView
        style={styles.scrollViewStyle}
        //内容相对于滚动视图边缘的坐标
        //吸顶的效果
        //这两个属性目前只支持ios 对安卓没有效果
        contentInset = {{top:-200}}
        contentOffset = {{y:200}}
        >
          <MineHeaderView />
          <View style={{marginTop:20}}>
            <MyCell
              leftIconName="h_7.png"
              leftTitle="我的订单"
              rightTitle="查看全部订单"
            />
            <MineMiddleView />
          </View>
        <View style={{marginTop:20}}>
          <MyCell
            leftIconName="coupon_1.png"
            leftTitle="RN钱包"
            rightTitle="账户余额：￥100"
          />
          <MyCell
            leftIconName="h_2.png"
            leftTitle="抵用券"
            rightTitle="10张"
          />
        </View>
        <View style={{marginTop:20}}>
          <MyCell
            leftIconName="h_3.png"
            leftTitle="积分商城"
          />
        </View>
        <View style={{marginTop:20}}>
          <MyCell
            leftIconName="h_5.png"
            leftTitle="今日推荐"
            rightIconName="coupon_1.png"
          />
        </View>
        <View style={{marginTop:20}}>
          <MyCell
            leftIconName="h_10.png"
            leftTitle="我要合作"
            rightTitle="轻松开店，招财进宝"
          />
        </View>
      </ScrollView>
    );
  }
});

var styles = StyleSheet.create({
  scrollViewStyle: {
    backgroundColor:'#e8e8e8'
  }
});

module.exports = Mine;

MineHeaderView组件：

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

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var HeaderView = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        { /*上部分*/ }
        {this.renderTopView()}
        { /*下部分*/ }
        {this.renderBottomView()}
      </View>
    );
  },

  // 上部分
  renderTopView(){
    return(
      <View style={styles.topViewStyle}>
        <Image source={{uri:'my_avator'}} style={styles.leftIconStyle}/>
        <View style={styles.centerViewStyle}>
          <Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>react-native实战</Text>
          <Image source={require('./../Source/common_arrow_right.png')} style={{width:8,height:13,marginRight:8}} />
        </View>
      </View>
    )
  },

// 下部分
renderBottomView(){
  return(
    <View style={styles.bottomViewStyle}>
      {this.renderBottomItem()}
    </View>
  );
},
renderBottomItem(){
  // 数组
  var itemArr = [];
  //数据数组
  var data = [{'number':'100', 'titile':'码哥券'},{'number':'12', 'titile':'评价'},{'number':'50', 'titile':'收藏'},];
  //遍历创建组件装入数组
  for (var i = 0; i < data.length; i++) {
    //取出单独的数据
    var item = data[i];
    itemArr.push(
      <TouchableOpacity key={i}>
        <View style={styles.bottomInnerViewStyle}>
          <Text style={{color:'white',fontSize:16}}>{item.number}</Text>
          <Text style={{color:'white',fontSize:15,marginTop:5}}>{item.titile}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  //返回数组
  return itemArr;
}

});

var styles = StyleSheet.create({
  container: {
    height:400,
    backgroundColor: '#1fb5ec',
  },
  leftIconStyle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    borderWidth: 3,
    borderColor: 'rgba(0,0,0,0.2)',
  },
  centerViewStyle: {
    flexDirection:'row',
    width:width * 0.72,
  },
  topViewStyle: {
    flexDirection: 'row',
    marginTop: 250,
    //设置侧轴的对其方式
    alignItems: 'center',
    //设置主轴的对其方式
    justifyContent: 'space-around'
  },
  bottomViewStyle: {
    flexDirection:'row',
    //绝对定位
    position:'absolute',
    bottom: 0,
  },
  bottomInnerViewStyle: {
    width:width/3+1,
    height: 50,
    backgroundColor:'rgba(255,255,255,0.5)',
    justifyContent:'center',
    alignItems:'center',
    borderRightWidth:1,
    borderRightColor:'white'
  }
});

module.exports = HeaderView;

MineMiddleView组件：

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

var MiddleData = require('./MiddleData.json');

var MineMiddleView = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        {this.renderAllItem()}
      </View>
    );
  },

  renderAllItem(){
    // 定义组件数组
    var itemArr = [];
    // 遍历
    for (var i = 0; i < MiddleData.length; i++) {
      //取出单独的数据
      var data = MiddleData[i];
      //创建组件装入数组
      itemArr.push(
        <InnerView key={i} iconName={data.iconName} title={data.title} />
      );
    }
    // 返回
    return itemArr;
  }

});

var InnerView = React.createClass({
  getDefaultProps(){
    return{
      iconName: '',
      title:''
    }
  },
  render(){
    return(
      <View>
        <Image source={{uri:this.props.iconName}} style={{width:25,height:25,marginLeft:10}} />
        <Text style={{marginTop:8}}>{this.props.title}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    //设置主轴方向
    flexDirection:'row',
    alignItems: 'center',
    backgroundColor: 'white',
    height: 80,
    justifyContent: 'space-around'

  }
});

module.exports = MineMiddleView;

CommonMyCell组件：

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

var MyCell = React.createClass({
  getDefaultProps(){
    return{
      leftIconName:'',
      leftTitle:'',
      rightIconName:'',
      rightTitle:''
    }
  },
  render() {
    return (
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.container}>
          { /*左边*/ }
          <View style={styles.leftViewStyle}>
            <Image source={{uri:this.props.leftIconName}} style={styles.leftImageStyle} />
            <Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
          </View>
          { /*右边*/ }
          <View style={styles.rightViewStyle}>
            {this.rightSubView()}
          </View>
        </View>
      </TouchableOpacity>
    );
  },
  //右边的内容
  rightSubView(){
    return(
      <View style={{flexDirection:'row',alignItems:'center'}}>
        {this.renderRightContent()}
        { /*箭头*/ }
        <Image  source={require('./../Source/common_arrow_right.png')} style={{width:8,height:13,marginRight:8, marginLeft:5}} />
      </View>
    )
  },
  // 右边具体返回的值
  renderRightContent(){
    if (this.props.rightIconName.length == 0) { //不返回图片
      return(
        <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
      )
    }else {
      return(
        <Image source={{uri:'h_9.png'}} style={{width:24,height:13}} />
      )
    }
  }
});

var styles = StyleSheet.create({
  container: {
    // 主轴方向
    flexDirection:'row',
    //主轴的对其方式
    justifyContent:'space-between',
    //背景颜色
    backgroundColor: 'white',
    //设置垂直居中
    alignItems: 'center',
    //高度
    height: 43,
    //下边框
    borderBottomColor:'#e8e8e8',
    borderBottomWidth:0.5
  },
  leftViewStyle: {
    // 主轴方向
    flexDirection:'row',
    //侧轴居中
    alignItems:'center',
    //左外边距
    marginLeft: 8
  },
  rightViewStyle: {

  },
  leftImageStyle: { // 左边的图片
    width:25,
    height:25,
    marginRight:6,
    //设置圆角
    borderRadius:12
  },
  leftTitleStyle: {
    fontSize:15
  }
});

module.exports = MyCell;