Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
Objetivos:
observação TouchableHighlight vs TouchableOpacity
app/components/Button/index.js
import ClearButton from './ClearButton';
import styles from './styles';
export { ClearButton, styles };
app/components/Button/ClearButton.js
import PropTypes from 'prop-types';
import React from 'react';
import { Text, TouchableOpacity, Image, View } from 'react-native';
import styles from './styles';
const ClearButton = ({ text, onPress }) => (
<TouchableOpacity style={styles.container} onPress={onPress}>
<View style={styles.wrapper}>
<Image resizeMode="contain" style={styles.icon} source={require('./images/icon.png')} />
<Text style={styles.text}>{text}</Text>
</View>
</TouchableOpacity>
);
ClearButton.propTypes = {
text: PropTypes.string,
onPress: PropTypes.func,
};
export default ClearButton
app/components/Button/styles.js
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
alignItems: 'center',
},
wrapper: {
flexDirection: 'row',
alignItems: 'center',
},
icon: {
width: 19,
marginRight: 11,
},
text: {
color: '$white',
fontSize: 14,
paddingVertical: 20,
fontWeight: '300',
},
});
app/index.js
app/screens/Home.js
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Container } from '../components/Container';
import { Logo } from '../components/Logo';
import { InputWithButton } from '../components/TextInput';
import { ClearButton } from '../components/Button';
const TEMP_BASE_CURRENCY = 'USD';
const TEMP_QUOTE_CURRENCY = 'GBP';
const TEMP_BASE_PRICE = '100';
const TEMP_QUOTE_PRICE = '79.74';
class Home extends Component {
handleChangeText = () => {
console.log('change text');
};
handlePressBaseCurrency = () => {
console.log('press base currency');
};
handlePressQuoteCurrency = () => {
console.log('press quote currency');
};
handleSwapCurrency = () => {
console.log('handle swap currency');
};
render() {
return (
<Container>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<Logo />
<InputWithButton
buttonText={TEMP_BASE_CURRENCY}
onPress={this.handlePressBaseCurrency}
defaultValue={TEMP_BASE_PRICE}
keyboardType="numeric"
onChangeText={this.handleChangeText}
/>
<InputWithButton
editable={false}
buttonText={TEMP_QUOTE_CURRENCY}
onPress={this.handlePressQuoteCurrency}
value={TEMP_QUOTE_PRICE}
/>
<ClearButton onPress={this.handleSwapCurrency} text="Reverse Currencies" />
</Container>
);
}
}
export default Home;