zoukankan      html  css  js  c++  java
  • React Native商城项目实战10

    1.新建一个MineMiddleView.js,专门用于构建中间的内容 

    /**
     * 个人中心中间内容设置
     */
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image,
        TouchableOpacity
    } from 'react-native';
    
    /**-------导入外部的json数据-------***/
    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(
                <TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('0')}}>
                    <View style={styles.innerViewStyle}>
                        <Image source={{uri: this.props.iconName}} style={{40, height:30, marginBottom:3}}/>
                        <Text style={{color:'gray'}}>{this.props.title}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
    });
    
    
    const styles = StyleSheet.create({
        container: {
            // 设置主轴的方向
            flexDirection:'row',
            alignItems: 'center',
            backgroundColor: 'white',
            // 设置主轴的对齐方式
            justifyContent:'space-around'
        },
    
        innerViewStyle:{
            70,
            height:70,
    
            // 水平和垂直居中
            justifyContent:'center',
            alignItems:'center'
        }
    });
    
    // 输出组件类
    module.exports = MineMiddleView;
    

    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');
    
    // ES5
    var Mine = React.createClass({
        render() {
            return (
                <ScrollView style={styles.scrollViewStyle}>
                    <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.效果图

    4.MiddleData.json

    [
      {"iconName":"order1", "title": "待付款"},
      {"iconName":"order2", "title": "待使用"},
      {"iconName":"order3", "title": "待评价"},
      {"iconName":"order4", "title": "退款/售后"}
    ]
    

    .

  • 相关阅读:
    解释机器学习模型的一些方法(一)——数据可视化
    机器学习模型解释工具-Lime
    Hive SQL 语法学习与实践
    LeetCode 198. 打家劫舍(House Robber)LeetCode 213. 打家劫舍 II(House Robber II)
    LeetCode 148. 排序链表(Sort List)
    LeetCode 18. 四数之和(4Sum)
    LeetCode 12. 整数转罗马数字(Integer to Roman)
    LeetCode 31. 下一个排列(Next Permutation)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    论FPGA建模,与面向对象编程的相似性
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7384715.html
Copyright © 2011-2022 走看看