react-native 横向滚动的商品展示

在app中会有这种页面

像这样商品是横向的，而且要滚动，思路是利用 ScrollView 横向的滚动

思路：

（a）: 横向滚动的整体作为一个组件  ShopCenter

{/*** 横向滚动 ***/}
                    <ShopCenter 
                        popToHomeView = {(smid) => this.pushToShopCenterDetail(smid)}
                    />

其中：（讨论梳理整体的链接跳转方法）

popToHomeView 这个函数是从组建中一级级传出来到父页面的，在父页面中让这个函数等价于 函数

pushToShopCenterDetail 

// 横向滚动 跳转到购物中心详情页
    pushToShopCenterDetail(smid){
        const { navigate } = this.props.navigation;
        navigate('Detail', {id: smid})
    }

 

这些都是在父页面中写的。
（b）：在组件页面中

es6写法代码

/* 组件 cell */
import React from 'react';
import {
    StyleSheet, 
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

// navigator
import { StackNavigator } from 'react-navigation';


// 获取设备宽高
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

// 引入外部的json数据
import Home_D5 from '../../../date/scrollCenter.json';

export default class ShopCenter extends React.Component {
    
    // props 传值，默认传的值 默认商品 id 为1.
    static defaultProps = {  
        popToHomeView: 1
    }
 
    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    style={styles.scrollViewStyle}
                    horizontal={true} // 横向
                    showsHorizontalScrollIndicator={false}  // 此属性为true的时候，显示一个水平方向的滚动条。
                    >
                    {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
                    shopImage = {data.img}
                    shopSale = {data.showtext.text}
                    shopName = {data.name}
                    detailurl = {data.detailurl}
                    smid = {data.smid}
                    key={i}
                    // 将id再次封装传递下去
                    popTopShopCenter = {(smid)=>this.popTopHome(smid)}
                />
            );
        }
        // 返回
        return itemArr;
    }

    popTopHome(smid){
        // 判断
        //if (this.props.smid == null) return;

        // 执行回调函数 将跳转地址传递下去
        this.props.popToHomeView(smid);
    }

}

// 每一个商场
export class ShopCenterItem extends React.Component{

    static defaultProps = {  
        shopImage: '',
        shopSale:'',
        shopName: '',
        detailurl: '',
        smid: '',
        popTopShopCenter: null
    }
   

    render(){
        return(
            <TouchableOpacity
                onPress={()=>this.clickItem(this.props.smid)}
            >
               <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(smid){
        // 判断
        if (this.props.smid == null) return;
        
        // 执行回调函数 再次接受传递的id
        this.props.popTopShopCenter(smid);
    }

};

这种组件中又拆分，跳转的时候带过去参数方法思路：一直将要传递的参数进行传递，最后在父页面中进行控制跳转传递参数就行。

es5写法

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

// 引入外部的组件类
var CommonCell = require('./XMGBottomCommonCell');

// 引入外部的json数据
var Home_D5 = require('../../LocalData/XMG_Home_D5.json');

var ShopCenter = React.createClass({

　　// es5 默认数据处理
    getDefaultProps(){
        // 回调函数
        return{
            popToHomeView: null
        }
    },
    
    render() {
        return (
            <View style={styles.container}>
                {/*上部分*/}
               <CommonCell
                   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
                    shopImage = {data.img}
                    shopSale = {data.showtext.text}
                    shopName = {data.name}
                    detailurl = {data.detailurl}
                    key={i}
                    popTopShopCenter = {(url)=>this.popTopHome(url)}
                />
            );
        }
        // 返回
        return itemArr;
    },

    popTopHome(url){
        // 判断
        if (this.props.popToHomeView == null) return;

        // 执行回调函数
        this.props.popToHomeView(url);
    }
});

// 每一个商场
var ShopCenterItem = React.createClass({
    getDefaultProps(){
        return{
            shopImage: '',
            shopSale:'',
            shopName: '',
            detailurl: '',
            popTopShopCenter: null
        }
    },

    render(){
        return(
           <TouchableOpacity 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) return;
        
        // 执行回调函数
        this.props.popTopShopCenter(url);
    }

});


const styles = StyleSheet.create({
    container: {
       marginTop:15
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

    imageStyle:{
        width:120,
        height:100,
        borderRadius:8
    },

    scrollViewStyle:{
        flexDirection:'row',
        backgroundColor:'white',
        padding:10
    },

    itemViewStyle:{
        margin:8
    },

    shopSaleStyle:{
        // 绝对定位
        position:'absolute',
        left:0,
        bottom:30,
        backgroundColor:'red',
        color:'white',
        padding:2
    },

    shopNameStyle:{
        textAlign:'center',
        marginTop:5
    }
});

// 输出组件类
module.exports = ShopCenter;

使用的时候导入一个Json数据就可以直接使用

json
{
  "count": 4,
  "data": [
    {
      "detailurl": "imeituan://www.meituan.com/web/?url=http://i.meituan.com/shoppingmall/smDetail/4374715",
      "promotionIcon": "",
      "name": "依诺♔大长腿",
      "img": "https://vi3.6rooms.com/live/2017/02/11/23/1010v1486825491140350116_s.jpg",
      "showtext": {
        "text": "离我最近",
        "count": 84,
        "color": ""
      },
      "longitude": 113.327086,
      "latitude": 23.131909,
      "smid": 4374715,
      "promotionText": "送福利 商品低至1.5折"
    },
    {
      "detailurl": "imeituan://www.meituan.com/web/?url=http://i.meituan.com/shoppingmall/smDetail/50606658",
      "promotionIcon": "",
      "name": "依诺♔小蛮腰",
      "img": "https://vi3.6rooms.com/live/2017/07/20/12/1010v1500526250183630933_s.jpg",
      "showtext": {
        "text": "熊孩纸♫允熙",
        "count": 55,
        "color": ""
      },
      "longitude": 113.26605,
      "latitude": 23.17151,
      "smid": 50606658,
      "promotionText": "春来花开 满100最高减60"
    },
    {
      "detailurl": "imeituan://www.meituan.com/web/?url=http://i.meituan.com/shoppingmall/smDetail/75813274",
      "promotionIcon": "",
      "name": "大蓒晚上见",
      "img": "https://vi0.6rooms.com/live/2017/03/26/23/1010v1490542518707536335_s.jpg",
      "showtext": {
        "text": "漂亮dancer",
        "count": 61,
        "color": ""
      },
      "longitude": 113.269668,
      "latitude": 23.1818,
      "smid": 75813274,
      "promotionText": "新春送福利 购物满额有好礼"
    },
      "longitude": 113.232008,
      "latitude": 23.397758,
      "smid": 41692498,
      "promotionText": "48家品牌优惠中：瑞可爷爷的店每满30减5，全单9折（买单立享）"
    }
  ],
  "tips": "全部5家",
  "jumpto": "imeituan://www.meituan.com/web/?url=http://i.meituan.com/shoppingmall/smList?sid=@geodist:asc"
}