React Native商城项目实战16 - 购物中心详细页

待我称王封你为后i 2021-09-17 17:30 183阅读 0赞

逻辑分析：   
首页（Home）加载的购物中心组件（ShopCenter），传递url数据；   
ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail)，   
ShopCenterDetail中利用WebView展示。

![1090399-20170826234154730-1667240533.png][]

1.Home.js

/**
     * 首页
     */
    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 (
                <View style={styles.container}>
                    {/*首页的导航条*/}
                    {this.renderNavBar()}
                    {/*首页主要内容*/}
                    <ScrollView>
                        {/*头部的View*/}
                       <TopView />
                        {/*中间上部分的view*/} 
                        <MiddleView />
                        {/*中间下部分内容*/}
                        <MiddleBottom
                            popTopHome={(data)=>{this.pushToDetail(data)}}
                        />
                        {/*购物中心*/}
                        <ShopCenter
                            popToHomeView={(url)=>this.pushToShopCenterDetail(url)}
                        />
                    </ScrollView>
                </View>
            );
        },
    
        // 首页的导航条
        renderNavBar(){
            return(
                <View style={styles.navBarStyle}>
                    <TouchableOpacity onPress={()=>{this.pushToDetail()}} >
                        <Text style={styles.leftTitleStyle}>宁波</Text>
                    </TouchableOpacity>
                    <TextInput placeholder="输入商家,品类,商圈" style={styles.topInputStyle} />
                    <View style={styles.rightNavViewStyle}>
                        <TouchableOpacity onPress={()=>{alert('点击了')}} >
                            <Image source={
         {uri:'icon_homepage_message'}} style={styles.navRightImgStyle} />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{alert('点击了')}} >
                            <Image source={
         {uri:'icon_homepage_scan'}} style={styles.navRightImgStyle} />
                        </TouchableOpacity>
                    </View>
                </View>
            )
        },
    
        // 跳转到首页详细页
        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;

2.ShopCenter.js

/**
     * 首页购物中心
     */
    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 (
                <View style={styles.container}>
                    <TitleView
                        leftIcon="gw"
                        leftTitle="购物中心"
                        rightTitle={Home_D5.tips}
                    />
                    <ScrollView
                        style={styles.scrollViewStyle}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    >
                        {this.renderAllItem()}
                    </ScrollView>
                </View>
            );
        },
    
        // 返回所有item
        renderAllItem(){
            var itemArr = [];
            var shopData = Home_D5.data;
            for (var i=0;i<shopData.length;i++){
                var data = shopData[i];
                itemArr.push(
                    <ShopCenterItem
                        key={i}
                        shopImage={data.img}
                        shopSale={data.showtext.text}
                        shopName={data.name}
                        detailurl={data.detailurl}
                        popToShopCenter={(url)=>this.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 (
                <TouchableOpacity activeOpacity={0.8} onPress={()=>this.clickItem(this.props.detailurl)}>
                    <View style={styles.itemViewStyle}>
                       <Image source={
         {uri:this.props.shopImage}} style={styles.imageStyle}/>
                        <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
                        <Text style={styles.shopNameStyle}>{this.props.shopName}</Text>
                    </View>
                </TouchableOpacity>
            );
        },
    
        // 点击事件
        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;

3.ShopCenterDetail.js

/**
     * 购物中心详情
     */
    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 (
                <View style={styles.container}>
                    {this.renderNavBar()}
                    <WebView
                        automaticallyAdjustContentInsets={true}
                        source={
         {uri: this.state.detailUrl}}
                        javaScriptEnabled={true}
                        decelerationRate="normal"
                        startInLoadingState={true}
                    />
                </View>
            );
        },
        // 导航条
        renderNavBar(){
            return(
                <View style={styles.navOutViewStyle}>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{this.props.navigator.pop()}} style={styles.LeftViewStyle}>
                        <Image source={
         {uri:'icon_camera_back_normal'}} style={styles.navImgStyle} />
                    </TouchableOpacity>
                    <Text style={
         {color:'white',fontSize:16,fontWeight:'bold'}}>购物中心</Text>
                    <TouchableOpacity  style={styles.rightViewStyle}>
                        <Image source={
         {uri:'icon_mine_setting'}} style={styles.navImgStyle} />
                    </TouchableOpacity>
                </View>
            )
        }
    });
    
    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;

4.效果图

![1090399-20170826234810793-1849533955.jpg][]![1090399-20170826234820230-1596495103.jpg][]

[1090399-20170826234154730-1667240533.png]: /images/20210726/788e3a3fc35845fe85f667fcdd3068a9.png
[1090399-20170826234810793-1849533955.jpg]: https://images2017.cnblogs.com/blog/1090399/201708/1090399-20170826234810793-1849533955.jpg
[1090399-20170826234820230-1596495103.jpg]: /images/20210726/ad9d5afad5b44b3ea0d572b0a17320d6.png