RN(SKU)

Json
export default {
    "skus":[
        {
            "skuId":67567,
            "productId":34710,
            "skuProps":"50271:64701;50272:64703;50273:64706",
            "skuDesc":"顏色:紅;大小:S;版本:港版",
            "costPrice":11,
            "basePrice":13,
            "marketPrice":110.1,
            "buyMin":0,
            "buyMax":96,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100484887.jpg",
        },
        {
            "skuId":67568,
            "productId":34710,
            "skuProps":"50271:64701;50272:64703;50273:64707",
            "skuDesc":"顏色:紅;大小:S;版本:大陸",
            "costPrice":12,
            "basePrice":13.1,
            "marketPrice":110.2,
            "buyMin":0,
            "buyMax":998,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100491931.png",
        },
        {
            "skuId":67569,
            "productId":34710,
            "skuProps":"50271:64702;50272:64705;50273:64706",
            "skuDesc":"顏色:黃;大小:L;版本:港版",
            "costPrice":21,
            "basePrice":14,
            "marketPrice":110.3,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100607180.png",
        },
        {
            "skuId":67570,
            "productId":34710,
            "skuProps":"50271:64702;50272:64705;50273:64707",
            "skuDesc":"顏色:黃;大小:L;版本:大陸",
            "costPrice":22,
            "basePrice":14.1,
            "marketPrice":110.4,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100610797.png",
        },
        {
            "skuId":67571,
            "productId":34710,
            "skuProps":"50271:64702;50272:64704;50273:64706",
            "skuDesc":"顏色:黃;大小:M;版本:港版",
            "costPrice":19,
            "basePrice":13.8,
            "marketPrice":110.5,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100598795.png",
        },
        {
            "skuId":67572,
            "productId":34710,
            "skuProps":"50271:64702;50272:64704;50273:64707",
            "skuDesc":"顏色:黃;大小:M;版本:大陸",
            "costPrice":20,
            "basePrice":13.9,
            "marketPrice":110.6,
            "buyMin":0,
            "buyMax":97,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100602928.png",
        },
        {
            "skuId":67573,
            "productId":34710,
            "skuProps":"50271:64702;50272:64703;50273:64706",
            "skuDesc":"顏色:黃;大小:S;版本:港版",
            "costPrice":17,
            "basePrice":13.6,
            "marketPrice":110.7,
            "buyMin":0,
            "buyMax":98,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100584827.png",
        },
        {
            "skuId":67574,
            "productId":34710,
            "skuProps":"50271:64702;50272:64703;50273:64707",
            "skuDesc":"顏色:黃;大小:S;版本:大陸",
            "costPrice":18,
            "basePrice":13.7,
            "marketPrice":110.8,
            "buyMin":0,
            "buyMax":90,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100593928.png",
        },
        {
            "skuId":67575,
            "productId":34710,
            "skuProps":"50271:64701;50272:64705;50273:64706",
            "skuDesc":"顏色:紅;大小:L;版本:港版",
            "costPrice":15,
            "basePrice":13.4,
            "marketPrice":110.9,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100569307.png",
        },
        {
            "skuId":67576,
            "productId":34710,
            "skuProps":"50271:64701;50272:64705;50273:64707",
            "skuDesc":"顏色:紅;大小:L;版本:大陸",
            "costPrice":16,
            "basePrice":13.5,
            "marketPrice":111,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100589327.png",
        },
        {
            "skuId":67577,
            "productId":34710,
            "skuProps":"50271:64701;50272:64704;50273:64706",
            "skuDesc":"顏色:紅;大小:M;版本:港版",
            "costPrice":13,
            "basePrice":13.2,
            "marketPrice":111.1,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100499848.png",
        },
        {
            "skuId":67578,
            "productId":34710,
            "skuProps":"50271:64701;50272:64704;50273:64707",
            "skuDesc":"顏色:紅;大小:M;版本:大陸",
            "costPrice":14,
            "basePrice":13.3,
            "marketPrice":111.2,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100505181.png",
        }
    ],
    "skupros":[
        {
            "proId":50271,
            "proName":"顏色",
            "values":[
                {
                    "proValueId":64701,
                    "proValue":"紅"
                },
                {
                    "proValueId":64702,
                    "proValue":"黃",
                }
            ]
        },
        {
            "proId":50272,
            "proName":"大小",
            "values":[
                {
                    "proValueId":64703,
                    "proValue":"S"
                },
                {
                    "proValueId":64704,
                    "proValue":"MMMMMMMMMMMMMMMMMMMMM"
                },
                {
                    "proValueId":64705,
                    "proValue":"L"
                }
            ]
        },
        {
            "proId":50273,
            "proName":"版本",
            "values":[
                {
                    "proValueId":64706,
                    "proValue":"港版"
                },
                {
                    "proValueId":64707,
                    "proValue":"大陸"
                }
            ]
        }
    ]
}
Js
import React, {
    Component
} from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    InteractionManager,
    Image,
    ScrollView,
    TouchableOpacity,
} from 'react-native';


// import Navigator from './src/APP/Nav';

import Json from './src/APP/Json';


export default class App extends Component {

    constructor(props) {
        super(props)

        this.state = {
            dataSource: [],
            Json: Json,
            skuProps: '',
            proValue:"",
            selectDict:{},
        };
    }

    componentDidMount() {
        // console.ignoredYellowBox = [
        //     'Warning: componentWillUpdate has been renamed',
        //     'Warning: componentWillMount has been renamed',
        //     'Warning: componentWillReceiveProps has been renamed',
        //     'Warning: codePush.SyncStatus'
        //     // 'Warning: isMounted(...) is deprecated',
        // ]
        // console.disableYellowBox = true

        let newArray = []
        for (let i = 0; i < 10; i++) {
            let dict = {
                title: "標(biāo)題",
                image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603344640367&di=1831eb733035d39e970b0a22110e3b1b&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg'
            }
            newArray.push(dict)
        }

        InteractionManager.runAfterInteractions(() => {
            //執(zhí)行耗時的同步任務(wù)
            this.setState({dataSource: newArray});
        });


        // 假設(shè)已經(jīng)知道...有顏色....大小.....版本可以選...并且索引是服務(wù)器返回的默認值...不會數(shù)組越界
        this.chooseIndex([1, 1, 0])

        // let newSku = []
        // for (let i = 0; i < skus.length; i++) {
        //     let dict = skus[i];
        //     if(skuProps == skus[i].skuProps){
        //         console.log(JSON.stringify(skus[i]))
        //     }
        //     newSku.push(dict);
        // }
        // 1865655:2217463;1865656:2217469;
    }

    // 默認選擇第幾個
    chooseIndex(chooseArrayIndex) {
        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }
        //默認選擇第一個SKU
        let skuProps = ""  // 比如 1865655:2217467;1865656:2217470
        let newSkupros = [];
        for (let i = 0; i < skupros.length; i++) {
            let dict1 = skupros[i];
            let ChooseIndex = chooseArrayIndex[i];

            if (i != skupros.length) {
                skuProps = skuProps + dict1.proId + ':'
            } else {
                skuProps = skuProps + dict1.proId
            }
            let newValues = []
            for (let j = 0; j < dict1.values.length; j++) {
                let dict2 = dict1.values[j];
                dict2.isChoose = 'unselect'
                if (j == ChooseIndex) {
                    dict2.isChoose = 'select'
                    skuProps = skuProps + dict2.proValueId + ';'
                }
                newValues.push(dict2)
            }
            dict1.values = newValues;

            newSkupros.push(dict1)
        }

        skuProps = skuProps.substring(0, skuProps.length - 1)
        Json.skupros = newSkupros
        this.setState({Json: Json, skuProps: skuProps});
    }


    // 默認選擇第幾個
    onPress(isChoose,proId, proValueId, sessionIndex, Index) {
        if(isChoose == 'disable'){
            return
        }
        let skuPropsStr = this.state.skuProps;
        let skuPropsArray = skuPropsStr.split(";")
        skuPropsArray[sessionIndex] = proId + ':' + proValueId
        let lastSkuPropsStr = skuPropsArray.join(";")

        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }
        let selectDict = {}
        for (let i = 0; i < skus.length; i++) {
            let dict = skus[i];
            if(lastSkuPropsStr == dict.skuProps){
                selectDict = dict;
                // console.log('選中對象')
                // console.log(dict)
                break;
            }
        }


        let newSkupros = [];
        let proValue = this.state.proValue
        for (let i = 0; i < skupros.length; i++) {
            let dict1 = skupros[i];

            let newValues = []
            for (let j = 0; j < dict1.values.length; j++) {
                let dict2 = dict1.values[j];

                if (sessionIndex == i) {
                    if (proValueId == dict2.proValueId) {
                        dict2.isChoose = 'select'
                    }else{
                        dict2.isChoose = 'unselect'
                    }
                }
                newValues.push(dict2)
            }
            dict1.values = newValues;

            newSkupros.push(dict1)
        }
        Json.skupros = newSkupros

        InteractionManager.runAfterInteractions(() => {
            //執(zhí)行耗時的同步任務(wù)
            this.setState({Json: Json,proValue:proValue,selectDict:selectDict});
        });
    }


    // render() {
    //     return (
    //         <View style={{flex:1}}>
    //         <FlatList
    //             keyExtractor={(item, index) => item.key = index.toString()}
    //             ListHeaderComponent={this.renderHeader}
    //             renderItem={this.renderItem}
    //             ref={(flatList)=>this.flatList = flatList}
    //             data={this.state.dataSource}
    //             ItemSeparatorComponent={()=> {
    //                 return <View style={{height:10,width:'100%',backgroundColor:'lightgray'}}/>
    //             }}
    //         />
    //         </View>
    //     );
    // }


    render() {

        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }

        return (
            <View style={{flex: 1, marginTop: 44}}>
                <ScrollView>
                    <Text>默認選中1,1,0</Text>
                    <View>
                        {
                            skupros.map((item1, index1,) => {
                                return (
                                    <View key={index1}>
                                        <Text style={{
                                            fontSize: 17,
                                            height: 50,
                                            marginLeft: 12,
                                            marginTop: 10,
                                        }}>{skupros[index1].proName}</Text>
                                        {this.renderSKUItem(skupros, index1, skus)}
                                    </View>
                                );
                            })
                        }
                    </View>
                    <Text>{JSON.stringify(this.state.selectDict)}</Text>
                </ScrollView>
            </View>
        );
    }

    //創(chuàng)建里面列表項目
    renderSKUItem(skupros, index1, skus) {
        return (
            <View style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap'}}>
                {skupros[index1].values.map((item, index) => {

                    let backgroundColor = skupros[index1].values[index].isChoose == 1 ? 'rgba(255, 229, 241, 1)' : 'rgba(236, 236, 236, 1)'

                    let color = skupros[index1].values[index].isChoose == 1 ? 'rgba(255, 82, 160, 1)' : 'rgba(51, 51, 51, 0.8)'

                    let isChoose = skupros[index1].values[index].isChoose;
                    let ViewStyle = {}
                    if (isChoose == 'select') {
                        // 選中
                        ViewStyle = styles.select;
                    } else if (isChoose == 'unselect') {
                        // 沒選中
                        ViewStyle = styles.unselect;
                    } else {
                        // 不可選擇
                        ViewStyle = styles.disable;
                    }
                    let TextStyle = {}
                    if (isChoose == 'select') {
                        // 選中
                        TextStyle = styles.selectText;
                    } else if (isChoose == 'unselect') {
                        // 沒選中
                        TextStyle = styles.unselectText;
                    } else {
                        // 不可選擇
                        TextStyle = styles.disableText;
                    }


                    return (
                        <TouchableOpacity
                            key={index}
                            onPress={()=> {
                                this.onPress(isChoose,skupros[index1].proId, skupros[index1].values[index].proValueId, index1, index)
                            }}>
                            <View style={[{
                                marginLeft: 10,
                                marginRight: 10,
                                marginBottom: 15,
                                paddingHorizontal: 20,
                                paddingVertical: 7,
                                flexDirection: 'row',
                                borderRadius: 3,
                                backgroundColor: backgroundColor,
                            }, ViewStyle]}>
                                <Text style={[{
                                    color: color,
                                    fontSize: 12
                                }, TextStyle]}>{skupros[index1].values[index].proValue}</Text>
                            </View>
                        </TouchableOpacity>
                    );
                })}
            </View>
        )
    }


    renderHeader = ()=> {
        return (
            <View style={{
                paddingTop: 44,
                height: 100,
                backgroundColor: 'red',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Text>頭部</Text>
            </View>
        )
    }


    renderItem = (item)=> {
        let rowData = item.item;
        let Index = rowData.key;
        return (  <View style={{
                backgroundColor: 'white',
                height: 100,
                justifyContent: 'space-between',
                paddingHorizontal: 10,
                flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Text>{rowData.title} {Index}</Text>
                <Image style={{height: 70, width: 70}} source={{uri: rowData.image}}/>
            </View>
        )
    }
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    disable: {
        backgroundColor: 'rgba(0,0,0,0.05)'
    },
    unselect: {
        backgroundColor: 'lightgray',
        textDecorationLine: 'line-through'
    },
    select: {
        backgroundColor: 'orange'
    },
    disableText: {
        textDecorationLine: 'line-through'
    },
    unselectText: {},
    selectText: {}
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末副瀑，一起剝皮案震驚了整個濱河市填抬，隨后出現(xiàn)的幾起案子昆淡，更是在濱河造成了極大的恐慌湃窍，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,723評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件衣厘，死亡現(xiàn)場離奇詭異窖梁，居然都是意外死亡恐锣，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門部念，熙熙樓的掌柜王于貴愁眉苦臉地迎上來弃酌，“玉大人，你說我怎么就攤上這事儡炼〖讼妫” “怎么了？”我有些...
    開封第一講書人閱讀 152,998評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵乌询，是天一觀的道長榜贴。 經(jīng)常有香客問我，道長妹田，這世上最難降的妖魔是什么唬党？ 我笑而不...
    開封第一講書人閱讀 55,323評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮鬼佣，結(jié)果婚禮上驶拱，老公的妹妹穿的比我還像新娘。我一直安慰自己晶衷，他們只是感情好蓝纲，可當(dāng)我...
    茶點故事閱讀 64,355評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晌纫，像睡著了一般税迷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缸匪，一...
    開封第一講書人閱讀 49,079評論 1贊 285
  • 城市分裂傳說
    那天翁狐，我揣著相機與錄音，去河邊找鬼凌蔬。 笑死露懒，一個胖子當(dāng)著我的面吹牛闯冷，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播懈词，決...
    沈念sama閱讀 38,389評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼蛇耀，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了坎弯？” 一聲冷哼從身側(cè)響起纺涤，我...
    開封第一講書人閱讀 37,019評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎抠忘，沒想到半個月后撩炊，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,519評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡崎脉，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年拧咳，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囚灼。...
    茶點故事閱讀 38,100評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡骆膝，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出灶体，到底是詐尸還是另有隱情阅签，我是刑警寧澤，帶...
    沈念sama閱讀 33,738評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布蝎抽，位于F島的核電站政钟，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏织中。R本人自食惡果不足惜锥涕，卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狭吼。 院中可真熱鬧层坠，春花似錦、人聲如沸刁笙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽疲吸。三九已至座每，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間摘悴，已是汗流浹背峭梳。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人葱椭。 一個月前我還...
    沈念sama閱讀 45,547評論 2贊 354
  • 代替公主和親
    正文 我出身青樓捂寿，卻偏偏與公主長得像，于是被迫代替她去往敵國和親孵运。 傳聞我的和親對象是個殘疾皇子秦陋，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,834評論 2贊 345