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"
}