react native 状态机数组应用

1.自定义一个状态机组件

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

const {width,height}=Dimensions.get('window');

//引入本地数据
const dataArr=[
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"单肩包"
    },
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"斜挎包"
    },
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"个性包"
    },
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"旅游包"
    },
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"钱包"
    },
    {
        "icon":"https://hrbrzyk.com/img/banner1.jpg",
        "name":"麻布包"
    }
]
//require('./../accets/localData/packageData');


export default class CKFlex extends Component{

    constructor(){
        super();
        this.state={
            shopArr:[]//状态机数组
        }
    }

    render(){
        return(
            <View style={styles.container}>
                {/* 上部分 */}
                <View style={styles.topViewStyle}>
                    <TouchableOpacity
                        style={styles.clickBtnStyle}
                        onPress={()=>this._addShop()}
                    >
                        <Text style={styles.textStyle}>添加商品</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.clickBtnStyle,{backgroundColor:'red',marginLeft:10}]}
                        onPress={()=>this._removeShop()}
                    >
                        <Text style={styles.textStyle}>删除商品</Text>
                    </TouchableOpacity>
                </View>
                {/* 下部分 */}
                <View>
                    <View style={styles.bottomStyle}>
                        {this.state.shopArr}
                    </View>
                </View>
            </View>
        )
    }

    /**
     * 添加商品
     */
    _addShop(){
        //1.定义变量
        let cols=3,shopW=100,shopH=120;//定义列数，盒子宽度、盒子高度


        //2.取出下标
        let index=this.state.shopArr.lenghth;
        if(index>=9){
            alert('购物车已经满了！');
            return;
        }

        //3.求出当前要创建的盒子所在的行和列
        let row =Math.floor(index/cols);
        let col=Math.floor(index%cols);

        //4.左边和上边
        let xSpace=(0.9*width-cols*shopW)/(cols-1);//水平方向的间距
        let ySpace=(0.7*height-3*shopW)/2;//垂直方向间距
        let left=col*(shopW+xSpace);
        let top=row*(shopH+ySpace);
        
        //5.创建盒子
        let shopView=(
            <View
                style={{
                    position:'absolute',
                    left,
                    top,
                    width:shopW,
                    hetiht:shopH,
                    justifyContent:'center',
                    alignItems:'center'
                }}
                key={index}
            >
                <Image
                source={{uri:dataArr[index].icon}}
                style={{width:shopW,height:shopH}}
                />
                <Text>{dataArr[index].name}</Text>
            </View>
        );
        //6.更新状态机
        let tempArr=this.state.shopArr;
        tempArr.push(shopView);
        this.setState({
            shopArr:tempArr
        });

    }
    /**
     * 移除商品
     */
    _removeShop(){
        let tempArr=this.state.shopArr;
        if(tempArr==0){
            alert('购物车中没有商品');
            return;
        }
        tempArr.pop();
        //更新状态机
        this.setState({
            shopArr:tempArr
        });

    }

}

//样式
const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'cyan'
    },
    topViewStyle:{
        flexDirection:'row',
        justifyContent:'center',
        marginTop:20
    },
    clickBtnStyle:{
        width:120,
        height:40,
        borderRadius:10,//圆角
        backgroundColor:'green',
        justifyContent:'center',
        alignItems:'center' 
    },
    textStyle:{
        color:'#fff'
    },
    bottomStyle:{
        width:0.9 *width,
        height:0.7*height,
        backgroundColor:'#fff',
        marginTop:40,
        marginLeft:0.05*width,
        position:'relative'
        
        
    }
})

2. App.js 引用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import CKFlex from './components/CKFlex';

const App: () => React$Node = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.mainViewStyle}>

      <CKFlex/>
      </SafeAreaView>
    </>
  );
};


const styles=StyleSheet.create({
  mainViewStyle:{
      flex:1,
      backgroundColor:'#fff',
  }
});



export default App;

3.结果如图