ReactNative商城项目实战16购物中心详细页

/**
 * 首页
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
    Platform,
    ScrollView
} from 'react-native';

var DimensiOns= require('Dimensions');
var screenW = Dimensions.get('window').width;
var screenH = Dimensions.get('window').height;

/*======导入外部组件类======*/
var HomeDetail = require('./HomeDetail');
var TopView = require('./HomeTopView');
var MiddleView = require('./HomeMiddleView');
var MiddleBottom = require('./MiddleBottomView');
var ShopCenter = require('./ShopCenter');
var ShopCenterDetail = require('./ShopCenterDetail');

// ES5
var Home = React.createClass({
    render() {
        return (
            
                {/*首页的导航条*/}
                {this.renderNavBar()}
                {/*首页主要内容*/}
                
                    {/*头部的View*/}
                   
                    {/*中间上部分的view*/} 
                    
                    {/*中间下部分内容*/}
                    {this.pushToDetail(data)}}
                    />
                    {/*购物中心*/}
                    this.pushToShopCenterDetail(url)}
                    />
                
            
        );
    },

    // 首页的导航条
    renderNavBar(){
        return(
            
                {this.pushToDetail()}} >
                    宁波
                
                
                
                    {alert('点击了')}} >
                        
                    
                    {alert('点击了')}} >
                        
                    
                
            
        )
    },

    // 跳转到首页详细页
    pushToDetail(data){
        this.props.navigator.push({
            component:HomeDetail,   // 要跳转过去的组件
            title:'首页详细页'
        });
    },

    // 跳转到购物中心详细页
    pushToShopCenterDetail(url){
        this.props.navigator.push({
            component:ShopCenterDetail,   // 要跳转过去的组件
            passProps:{'url':this.dealWithImgUrl(url)},  // 传递数据到下一个界面
        });
    },

    // URL处理函数
    dealWithImgUrl(url){
        return url.replace('imeituan://www.meituan.com/web/?url=','');
    },
});

const styles = StyleSheet.create({
    // 导航栏
    navBarStyle:{
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        // 主轴方向
        flexDirection:'row',
        // 侧轴对齐方式 垂直居中
        alignItems:'center',
        // 主轴对齐方式
        justifyContent:'space-around', // 平均分布
    },
    // 导航条左侧文字
    leftTitleStyle:{
        color:'white',
        fontSize:16,
    },
    // 导航栏输入框
    topInputStyle:{
        width:screenW * 0.71,
        height:Platform.OS === 'ios' ? 35 : 30,
        backgroundColor:'white',
        marginTop:Platform.OS === 'ios' ? 18 : 0,
        // 圆角
        borderRadius:18,
        paddingLeft:10,
    },
    // 导航条右侧视图
    rightNavViewStyle:{
        flexDirection:'row',
        height:64,
        // 侧轴对齐方式
        alignItems:'center',
        // backgroundColor:'blue',
    },
    // 导航栏右侧图片
    navRightImgStyle:{
        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

// 输出
module.exports = Home;

/**
 * 首页购物中心
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    TouchableOpacity
} from 'react-native';

// 导入外部组件类
var TitleView = require('./TitleCommonCell');
// 导入json数据
var Home_D5 = require('../../LocalData/XMG_Home_D5.json');

// ES5
var ShopCenter = React.createClass({
    getDefaultPorps(){
        return{
            popToHomeView:null, // 回调函数
        }
    },
    render() {
        return (
            
                
                
                    {this.renderAllItem()}
                
            
        );
    },

    // 返回所有item
    renderAllItem(){
        var itemArr = [];
        var shopData = Home_D5.data;
        for (var i=0;ithis.popTopHome(url)}
                />
            )
        }
        return itemArr;
    },

    // 返回首页
    popTopHome(url){
        if(this.props.popToHomeView != null){
            this.props.popToHomeView(url);
        }
    }
});

// 每一个商场
var ShopCenterItem = React.createClass({
    getDefaultProps(){
        return{
            shopImage:'',
            shopSale:'',
            shopName:'',
            detailurl:'',
            popToShopCenter:null
        }
    },
    render() {
        return (
            this.clickItem(this.props.detailurl)}>
                
                   
                    {this.props.shopSale}
                    {this.props.shopName}
                
            
        );
    },

    // 点击事件
    clickItem(url){
        if(this.props.detailurl != null){
            this.props.popToShopCenter(url);
        }
    },
});

const styles = StyleSheet.create({
    container: {
        marginTop:10,
    },
    scrollViewStyle:{
        flexDirection:'row',
        backgroundColor:'white',
        padding:10,
    },
    itemViewStyle:{
        margin:8,
    },
    imageStyle:{
        width:120,
        height:100,
        borderRadius:8,
    },
    shopSaleStyle:{
        // 定位
        position:'absolute',
        left:0,
        bottom:30,
        backgroundColor:'red',
        color:'white',
        padding:3,
    },
    shopNameStyle:{
        textAlign:'center',
        marginTop:5,
    },
});

// 输出
module.exports = ShopCenter;

/**
 * 购物中心详情
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    Image,
    TouchableOpacity,
    WebView
} from 'react-native';

// ES5
var ShopCenterDetail = React.createClass({
    getInitialState(){
        return{
            detailUrl: this.props.url
        }
    },
    render() {
        return (
            
                {this.renderNavBar()}
                
            
        );
    },
    // 导航条
    renderNavBar(){
        return(
            
                {this.props.navigator.pop()}} style={styles.LeftViewStyle}>
                    
                
                购物中心
                
                    
                
            
        )
    }
});

const styles = StyleSheet.create({
    container: {
        flex:1,
    },
    // 导航条视图
    navOutViewStyle:{
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        // 主轴方向
        flexDirection:'row',
        // 侧轴对齐方式 垂直居中
        alignItems:'center',
        // 主轴方向居中
        justifyContent:'center',
    },
    // 导航条左侧
    LeftViewStyle:{
        position:'absolute',
        left:10,
        bottom:15,
    },
    // 导航栏右侧
    rightViewStyle:{
        // 绝对定位
        position:'absolute',
        right:10,
        bottom:15,
    },
    // 导航条上图片
    navImgStyle:{
        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },

});

// 输出
module.exports = ShopCenterDetail;