小六教你用ReactNative做一个拼图游戏(一) 切了只猫猫..

最近ReactNative的协议风波,好像很多大公司都准备放弃使用ReactNative

不过题主还是非常喜欢使用ReactNative,为啥?方便呗。这里不过多的描述ReactNative的太多基础知识。

相关环境搭建ReactNative网站还是说的很多的。

直接进入主题,咱们先搞点事情出来再说。

//TODO GIF

第一次发博客,排版各种功能都在学习中,大家见谅。

项目搭建和基本环境

 咱们先初始化一个项目

{
  react-native-cli: 2.0.1,
  react-native: 0.49.3
}

 

图片分割分配,静态布局

首先删掉原先的部分代码,咱们做一个和屏幕宽度相同的View,放在屏幕中间,再加上一个风骚的颜色背景,我们会看的更加清楚(部分代码)

const WIDTH = Dimensions.get("window").width;
<View style={styles.container}>
       <View style={styles.canvas}>
             <Text>{WIDTH}</Text>
     </View>
</View>
const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        canvas: {
            width: WIDTH,
            height: WIDTH,
            backgroundColor: "red",
        },

    })
;

  

下一步就是布局出我们需要的3*3图片方正

 图片我们用base64,这样使用起来更加方便。

首先我们需要一个帮助我们处理工具方法

 具体用法 通过传入JSON参数 offset为起点  size为需要切割的图片大小

完成切割以后的代码如下

 

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Dimensions,
    ScrollView,
    Text,
    ImageEditor,
    Image,
    View
} from 'react-native';
const WIDTH = Dimensions.get("window").width;


const _IMG = "data:image/jpeg;base64,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";

//转换成Promise  我们会用的更加方便
const cropImage = function (img, cropData) {
    return new Promise(function (resolve, reject) {
        ImageEditor.cropImage(img, cropData, resolve, reject);

    });
}
const getSize = function (img) {

    return new Promise(function (resolve, reject) {
        Image.getSize(img, (width, height) => {
            resolve({width, height})
        }, reject);

    });
}


const imageSlicing = async function (base64Code) {
    //好习惯,首先写返回值
    let result = [];
    //获取图片宽和高
    let {width: imgWidth, height: imgHeight} = await getSize(base64Code);
    //进行切割 3*3布局
    // 基本功两次循环

    let _column = 3;
    let _row = 3;
    let _columnWidth = imgWidth / _column;
    let _rowHeight = imgHeight / _row;

    let cropData = [];
    for (let r = 0; r < _row; r++) {
        for (let c = 0; c < _column; c++) {
            let _cropData = {
                offset: {
                    x: c * _columnWidth,
                    y: r * _rowHeight,
                },
                size: {
                    width: _columnWidth,
                    height: _rowHeight,
                },
            }
            console.log(_cropData.offset.x);
            let uri = await cropImage(base64Code, _cropData);
            result.push(uri);
        }


    }
    return result;

}


export default class App extends Component<{}> {

    constructor() {
        super();
        this.state = {
            myUrl: {uri: _IMG},
            imgList: [],
        }
        let _this = this;

        imageSlicing(_IMG).then((json) => {
            this.setState({imgList: json});
        });

    }

    renderImage() {

        return
    }


    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.canvas}>
                    {/*<Image  source={this.state.myUrl}></Image>*/}
                    {this.state.imgList.map((uri, index) => {
                        return (
                            <Image style={styles.imageTest} key={index} source={{uri: uri}}/>
                        )
                    })}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        canvas: {
            flex: 1
        },
        imageTest: {
            width: WIDTH/3,
            height: WIDTH/3,
        }

    })
;

  效果如下

可爱的猫猫被我们肢解了  好惨~

第一节到此为止,之后会介绍接下来的步骤

 

posted on 2017-10-10 17:07  刘成帅  阅读(864)  评论(0编辑  收藏  举报

导航