React Native商城项目实战13 - 首页中间上部分内容

关注

原创最新推荐文章于 2026-09-27 11:40:50 发布 863 阅读 AI 写同款· GEO 优化 ›

RN 开源项目(1) 算法知识点繁多，企业考察的题目千变万化，面对越来越近的“金九银十”，我给大家准备好了一套比较完善的学习方法，希望能帮助大家在有限的时间里尽可能系统快速的恶补算法，通过高效的学习来提高大家面试中算法模块的通过率。这一套学习资料既有文字档也有视频，里面不仅仅有关键知识点的整理，还有案例的算法相关部分的讲解，可以帮助大家更好更全面的进行学习，二者搭配起来学习效果会更好。部分资料展示：有了这套学习资料，坚持刷题一周，你就会发现自己的算法知识体系有明显的完善，离大厂Offer的距离更加近。阅读详情

这里写图片描述
1.HomeMiddleView.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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;

// 导入外部的组件类
var CommonView = require('./MiddleCommonView');

// 导入json数据
var MiddleJSON = require('../../LocalData/HomeTopMiddleLeft.json');

// ES5
var MiddelView = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {this.renderLeftView()}
                <View>
                    {this.renderRightView()}
                </View>
            </View>
        );
    },

    // 左边视图
    renderLeftView(){
        // 取出对应的数据
        var data = MiddleJSON.dataLeft[0];
        return(
            <TouchableOpacity activeOpacity={0.8}>
                <View style={styles.leftViewStyle}>
                    <Image source={{uri:data.img1}} style={styles.leftImgStyle} />
                    <Image source={{uri:data.img2}} style={styles.leftImgStyle} />
                    <Text style={{color:'gray'}}>{data.title}</Text>
                    <View style={{flexDirection:'row',marginTop:5}}>
                        <Text style={{color:'blue',marginRight:5}}>{data.price}</Text>
                        <Text style={{color:'orange',backgroundColor:'yellow'}}>{data.sale}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    },

    // 右边视图
    renderRightView(){
        var itemArr = [];
        var rightData = MiddleJSON.dataRight;
        for (var i=0;i<rightData.length;i++){
            var data = rightData[i];
            itemArr.push(
                <CommonView
                    key={i}
                    title={data.title}
                    subTitle={data.subTitle}
                    rightIcon={data.rightImage}
                    titleColor={data.titleColor}
                />
            );
        }
        return itemArr;
    },
});

const styles = StyleSheet.create({
    container: {
        marginTop:10,
        flexDirection:'row',
    },
    leftViewStyle:{
        width:screenW * 0.5,
        height:119,
        backgroundColor:'white',
        marginRight:1,
        alignItems:'center',
        justifyContent:'center',
    },
    leftImgStyle:{
        width:120,
        height:30,
        // 图片内容模式
        resizeMode:'contain'
    },
});

// 输出
module.exports = MiddelView;

2.MiddleCommonView.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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 CommonView = React.createClass({
    getDefaultProps(){
        return{
            title:'',
            subTitle:'',
            rightIcon:'',
            titleColor:''
        }
    },
    render() {
        return (
            <TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('点击了')}}>
                <View style={styles.container}>
                    <View>
                        <Text style={[{color:this.props.titleColor}, styles.titleStyle]}>{this.props.title}</Text>
                        <Text style={styles.subTitleStyle}>{this.props.subTitle}</Text>
                    </View>
                    <Image source={{uri:this.props.rightIcon}} style={{width:64,height:43}} />
                </View>
            </TouchableOpacity>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width:screenW * 0.5 -1,
        height:59,
        marginBottom:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around',
    },
    titleStyle:{
        fontSize:18,
        fontWeight:'bold',
    },
    subTitleStyle:{
        color:'gray',
    },
});

// 输出
module.exports = CommonView;

3.用到的json

{
  "dataLeft":[
    {"img1" : "mdqg", "img2" : "yyms", "title" : "探路组碳烤鱼", "price": "¥9.5", "sale": "再减3元"}
  ],
  "dataRight":[
    {"title" : "天天特价", "subTitle" : "特惠不打烊", "rightImage" : "tttj", "titleColor": "orange"},
    {"title" : "一元吃", "subTitle" : "一元吃美食", "rightImage" : "yyms", "titleColor": "red"}
  ]
}