#App6 Jogo Cara e Cora com React Native

index.android.js

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

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Rotas from './src/Rotas';

export default class app6 extends Component {
  render() {
    return (
      <Rotas />
    );
  }
}

AppRegistry.registerComponent('app6', () => app6);

OutrosJogos.js

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class OutrosJogos extends Component {
	render() {
		return (
			<Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
				Aqui podem ser apresentadas informações sobre outros jogos do desenvolvedor
			</Text>
		);
	}
}

Principal.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  TouchableHighlight
} from 'react-native';

import { Actions } from 'react-native-router-flux';

const logo = require('../imgs/logo.png');
const btnJogar = require('../imgs/botao_jogar.png');
const btnSobreJogo = require('../imgs/sobre_jogo.png');
const btnOutrosJogos = require('../imgs/outros_jogos.png');

export default class Principal extends Component {
  render() {
    return (
      <View style={styles.cenaPrincipal}>

        <View style={styles.apresentacaoJogo}>
          <Image source={logo} />

          <TouchableHighlight
            onPress={() => { Actions.resultado(); }}
          >
            <Image source={btnJogar} />
          </TouchableHighlight>
        </View>

        <View style={styles.rodape}>
          <TouchableHighlight
            onPress={() => { Actions.sobrejogo(); }}
          >
            <Image source={btnSobreJogo} />
          </TouchableHighlight>

          <TouchableHighlight
            onPress={() => { Actions.outrosjogos(); }}
          >
            <Image source={btnOutrosJogos} />
          </TouchableHighlight>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  cenaPrincipal: {
    flex: 1,
    backgroundColor: '#61BD8C'
  },
  apresentacaoJogo: {
    flex: 10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  rodape: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

Resultado.js

import React, { Component } from 'react';
import { Image, View, StyleSheet } from 'react-native';

const cara = require('../imgs/moeda_cara.png');
const coroa = require('../imgs/moeda_coroa.png');

export default class Resultado extends Component {
	constructor(props) {
		super(props);

		this.state = { resultado: '' };
	}

	componentWillMount() {
		const numAleatorio = Math.floor(Math.random() * 2);
		let caraOuCoroa = '';

		if (numAleatorio === 0) {
			caraOuCoroa = 'cara';
		} else {
			caraOuCoroa = 'coroa';
		}

		this.setState({ resultado: caraOuCoroa });
	}

	render() {
		if (this.state.resultado === 'cara') {
			return (
				<View style={styles.resultado}>
					<Image source={cara} />
				</View>
			);
		}

		return (
			<View style={styles.resultado}>
				<Image source={coroa} />
			</View>
		);
	}
}

const styles = StyleSheet.create({
	resultado: {
		flex: 1,
		backgroundColor: '#61BD8C',
		justifyContent: 'center',
		alignItems: 'center'
	}
});

Rotas.js

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';

import Principal from './components/Principal';
import SobreJogo from './components/SobreJogo';
import OutrosJogos from './components/OutrosJogos';
import Resultado from './components/Resultado';

const Rotas = () => (
	<Router sceneStyle={{ paddingTop: 50 }}>
    <Scene key='principal' component={Principal} initil title="Cara ou coroa" />
    <Scene key='sobrejogo' component={SobreJogo} title="Sobre o Jogo" />
    <Scene key='outrosjogos' component={OutrosJogos} title="Outros Jogos" />
    <Scene key='resultado' component={Resultado} title="Resultado" />
  </Router>
);

export default Rotas;

SobreJogo.js

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class SobreJogo extends Component {
	render() {
		return (
			<Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
				Aqui podem ser apresentadas informações sobre o jogo
			</Text>
		);
	}
}