通过编写React Native实例,理解代码逻辑,熟悉编程规范. 本文介绍网格游戏,从中可以学习绘制数组拼接页面,创建动画视图的使用方式. 多做多练多思考.

更多: http://www.wangchenlong.org/

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

主页

引入主页(Main),使用registerComponent把主页注册入项目.

var Main = require('./main.js'); // 主页

// 引入模块
import React,{
  AppRegistry
} from 'react-native';

AppRegistry.registerComponent('WclJingGame',() => Main);

也可以使用变量(var)的形式引入模块.

var React = require('react-native');
var {
  AppRegistry
  } = React;

主页(Main)只是过渡,显示网格页面(BoardView). 主页一般管理导航信息,处理页面的切换.

// 主页
class Main extends Component {
  render() {
    return (
      <View style={styles.container}> <BoardView/> </View> ); } }

网格页

设置页面常量,参照屏幕的宽和高设置单元格的大小.

// 屏幕的长宽
var {width,height} = require('Dimensions').get('window');

var SIZE = 4; // 每行四个

var CELL_SIZE = Math.floor(width * .2); // 每个单元格占1/5
var CELL_PADDING = Math.floor(CELL_SIZE * .05); // 间距是单元格1/20
var BORDER_RADIUS = CELL_PADDING * 2; // 圆角为1/10

var TILE_SIZE = CELL_SIZE - CELL_PADDING * 2; // 单元格的实际显示宽度
var LETTER_SIZE = Math.floor(TILE_SIZE * .75); // 字体大小是宽度的3/4

获取屏幕宽高,require('Dimensions').get('window').

构造器(constructor),初始化翘起(tilt)动画的起始状态.

class BoardView extends Component {
  /** * 构造器,初始化翘起状态 * @param props 状态 */
  constructor(props) {
    super(props);
    var tilt = new Array(SIZE * SIZE); // 翘起
    for (var i = 0; i < tilt.length; i++) {
      tilt[i] = new Animated.Value(0);
    }
    this.state = {tilt};
  }
}

循环渲染每个小方块. 设置三个参数,key序号,position位置,letter字母. 把这三个参数传递至renderTile方法,渲染页面,并返回.

/** * 渲染每个小方块,设置参数,把参数发送至renderTile. * * @returns {Array} 渲染数组 */
renderTiles() {
  var result = [];
  for (var row = 0; row < SIZE; row++) {
    for (var col = 0; col < SIZE; col++) {
      var key = row * SIZE + col; // 字母顺序
      var letter = String.fromCharCode(65 + key); // 对于字母

      // 翘起变化的差值
      var tilt = this.state.tilt[key].interpolate({
        inputRange: [0,1],outputRange: ['0deg','-30deg']
      });

      // 位置
      var position = {
        left: col * CELL_SIZE + CELL_PADDING,top: row * CELL_SIZE + CELL_PADDING,transform: [{perspective: CELL_SIZE * 8},{rotateX: tilt}]
      };

      result.push(this.renderTile(key,position,letter));
    }
  }
  return result;
}

渲染小方块. key表示数组页面的唯一值; style样式使用position设置位置; onStartShouldSetResponder是动画页面(Animated.View)的点击效果.

renderTile(id,letter) {
  return (
    <Animated.View  key={id} style={[styles.tile, position]} onStartShouldSetResponder={() => this.clickTile(id)}> <Text style={styles.letter}>{letter}</Text> </Animated.View> ); }

使用style的位置属性position: 'absolute'.

点击小方块的动画,使用Animated.timing方法,添加初始值和效果,调用start()开始.

clickTile(id) {
    //alert(id);
    console.log(id);
    var tilt = this.state.tilt[id];
    tilt.setValue(1);
    Animated.timing(tilt,{
      toValue: 0,duration: 250,easing: Easing.quad
    }).start();
  }

效果

通过网格游戏实例学习React Native的数组拼接页面和动画视图,多做多练是学习唯一途径.

参考我的朋友Zhen Wang的文章.

OK,that’s all! Enjoy it!

原始地址:
http://www.wangchenlong.org/2016/04/24/1604/241-rn-jing-game/
欢迎Follow我的GitHub,关注我的简书,CSDN,掘金. 我已委托“维权骑士”为我的文章进行维权行动. 未经授权,禁止转载,授权或合作请留言.