index.ios.js

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

import React, { Component, PropTypes } from 'react';
import { Animated, Image, Button, Alert, AppRegistry, StyleSheet, Text, View } from 'react-native';

const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dices: [getRandomInt(1, 6), getRandomInt(1, 6), getRandomInt(1, 6)]
    };
  }

  onButtonPress = () => {
    this.setState({
      dices: [getRandomInt(1, 6), getRandomInt(1, 6), getRandomInt(1, 6)]
    });
  }
  result = (sum) => {
    mapping = {
      0: '上家',
      1: '自己',
      2: '下家',
      3: '對家'
    }
    remain = sum % 4
    return sum + " => " + mapping[remain]
  }
  sumDices = () => {
    return this.state.dices.reduce((prev, curr) => prev + curr)
  }
  render() {
    return (
      <View style={ styles.row }>
        <View style={ styles.diceRow }>
          <Dice value={ this.state.dices[0] } />
          <Dice value={ this.state.dices[1] } />
          <Dice value={ this.state.dices[2] } />
        </View>
        <Text style={ styles.result }>
          { this.result(this.sumDices()) }
        </Text>
        <Text style={ styles.result }>
          { `抓 2 剩 ${16 - this.sumDices()}` }
        </Text>
        <Button
                onPress={ this.onButtonPress }
                title="ROLL"
                color="white"
                style={ { flex: 1 } } />
      </View>
      );
  }
}
const diceImageMapping = {
  1: 'https://i.imgur.com/EIQATDY.png',
  2: 'https://i.imgur.com/9QANU29.png',
  3: 'https://i.imgur.com/e5HL9Ut.png',
  4: 'https://i.imgur.com/3d1RROV.png',
  5: 'https://i.imgur.com/15wENpH.png',
  6: 'https://i.imgur.com/JZ9qH9G.png'
}
class Dice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(1),
    };
  }
  render() {
    return (
      <Animated.View style={ [styles.diceContainer, { transform: [{ scale: this.state.bounceValue }] }] }>
        <Image
               style={ { width: 50, height: 50 } }
               source={ { uri: diceImageMapping[this.props.value] } } />
      </Animated.View>
    )
  }
  componentDidUpdate() {
    this.state.bounceValue.setValue(1.2); // Start large
    Animated.spring( // Base: spring, decay, timing
      this.state.bounceValue, // Animate `bounceValue`
      {
        toValue: 0.8, // Animate to smaller size
        friction: 1, // Bouncier spring
      }
    ).start();
  }
}

const styles = StyleSheet.create({
  diceRow: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  diceContainer: {
    padding: 20,
    margin: 10,
    borderRadius: 5,
    overflow: 'hidden',
    aspectRatio: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  result: {
    fontSize: 20,
    color: 'white',
  },
  row: {
    backgroundColor: '#234422',
    flex: 1,
    padding: 30,
    justifyContent: 'space-between',
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);