#App7: Calculadora com React Native

App.js

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

import { Topo, Resultado, Painel } from './components';

export default class App extends Component {

	constructor(props) {
		super(props);

		this.state = { num1: '', num2: '', operacao: 'soma', resultado: '' };

		this.calcular = this.calcular.bind(this);
		this.atualizaValor = this.atualizaValor.bind(this);
		this.atualizaOperacao = this.atualizaOperacao.bind(this);
	}

	calcular() {
		let resultado = 0;
		
		switch (this.state.operacao) {
			case 'soma':
				resultado = parseFloat(this.state.num1) + parseFloat(this.state.num2);
				break;

			case 'subtracao':
				resultado = parseFloat(this.state.num1) - parseFloat(this.state.num2);
				break;

			default:
				resultado = 0;
		}

		this.setState({ resultado: resultado.toString() })
	}

	atualizaOperacao(operacao) {
		this.setState({ operacao });
	}

	atualizaValor(nomeCampo, numero) {
		const obj = {};
		obj[nomeCampo] = numero;

		this.setState(obj);
	}

	render() {
		return (
		<View>
			<Topo />
			<Resultado resultado={this.state.resultado} />
			<Painel 
				num1={this.state.num1}
				num2={this.state.num2}
				operacao={this.state.operacao}
				calcular={this.calcular}
				atualizaOperacao={this.atualizaOperacao}
				atualizaValor={this.atualizaValor}
			/>
		</View>
		);
	}
};

Cabecalho.js

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

export default props => (
	<View style={styles.topo}>
		<Text style={styles.txtTitulo}>Calculadora 1.0</Text>
	</View>
);

const styles = StyleSheet.create({
	topo: {
		backgroundColor: '#2196F3',
		padding: 10,
		alignItems: 'center'
	},
	txtTitulo: {
		fontSize: 25,
		color: '#FFF'
	}
});

Comando.js

import React from 'react';
import { Button } from 'react-native';

export default props => (
	<Button title="Calcular" onPress={props.acao} />
);

Entrada.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Numero from './Numero';

export default props => (
	<View style={styles.numeros}>
		<Numero num={props.num1} atualizaValor={props.atualizaValor} nome='num1' />
		<Numero num={props.num2} atualizaValor={props.atualizaValor} nome='num2' />
	</View>
);

const styles = StyleSheet.create({
	numeros: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	}
})

index.android.js

import React from 'react';
import { AppRegistry } from 'react-native';

import App from './src/App';

const App7 = () => (
  <App />
);

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

index.js

export * from './Painel';
export * from './Resultado';
export * from './Topo';

Numero.js

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';

export default props => (
	<TextInput 
		style={styles.numero} 
		value={props.num} 
		onChangeText={valorDoCampo => props.atualizaValor(props.nome, valorDoCampo)}
	/>
);

const styles = StyleSheet.create({
	numero: {
		width: 140,
		height: 80,
		fontSize: 20
	}
});

Operacao.js

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

export default class Operacao extends Component {
	render() {
		return (
			<Picker 
				style={styles.operacao}
				selectedValue={this.props.operacao}
				onValueChange={op => { this.props.atualizaOperacao(op); }}
			>
				<Picker.Item label='Soma' value='soma' />
				<Picker.Item label='Subtração' value='subtracao' />
			</Picker>
		);
	}
}

const styles = StyleSheet.create({
	operacao: {
		marginTop: 15,
		marginBottom: 15
	}
});

Painel.js

import React from 'react';
import { View } from 'react-native';

import Entrada from './Entrada';
import Operacao from './Operacao';
import Comando from './Comando';

const Painel = props => (
	<View>
		<Entrada 
			num1={props.num1} 
			num2={props.num2} 
			atualizaValor={props.atualizaValor}
		/>
		<Operacao 
			operacao={props.operacao} 
			atualizaOperacao={props.atualizaOperacao} 
		/>
		<Comando acao={props.calcular} />
	</View>
);

export { Painel };

Resultado.js

import React from 'react';
import { View, Text } from 'react-native';
import Visor from './Visor'

const Resultado = props => (
	<Visor resultado={props.resultado} />
);

export { Resultado };

Topo.js

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

import Cabecalho from './Cabecalho'

const Topo = props => (
	<Cabecalho />
);

export { Topo };

Visor.js

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

export default props => (
	<View>
		<TextInput style={styles.visor}
			placeholder='Resultado'
			editable={false}
			value={props.resultado}
		/>
	</View>
);

const styles = StyleSheet.create({
	visor: {
		height: 100,
		fontSize: 30
	}
});

🎉❤