Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
Objetivos:
@media ios
e @media ios
@media: consulta propriedades do dispositivo.app/components/Header
;app/components/Header
, crie os arquivos index.js
styles.js
e Header.js
;app/components/Header/styles.js
;app/components/Header/Header.js
;app/components/Header/index.js
;app/screens/Home.js
e veja o resultado;app/components/Header/images
;app/components/Header/images
;app/components/Header/Header.js
;app/components/Header/styles.js
;app/components/Header
cd CurrencyConverter
mkdir app/components/Header
index.js
styles.js
e Header.js
touch app/components/Header/index.js
touch app/components/Header/styles.js
touch app/components/Header/Header.js
yarn start
app/components/Header/styles.js
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({});
app/components/Header/Header.js
import React from 'react';
import { View } from 'react-native';
import styles from './styles';
const Header = () => <View style={styles.container} />;
export default Header;
app/components/Header/index.js
import Header from './Header';
import styles from './styles';
export { Header, styles };
app/screens/Home.js
e veja o resultadoimport 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';
import { LastConverted } from '../components/Text';
import { Header } from '../components/Header';
const TEMP_BASE_CURRENCY = 'USD';
const TEMP_QUOTE_CURRENCY = 'GBP';
const TEMP_BASE_PRICE = '100';
const TEMP_QUOTE_PRICE = '79.74';
const TEMP_LAST_CONVERTED = new Date();
const TEMP_CONVERSION_RATE = 0.79739;
class Home extends Component {
handleChangeText = () => {
console.log('change text');
};
handlePressBaseCurrency = () => {
console.log('press base currency');
};
handlePressQuoteCurrency = () => {
console.log('press quote currency');
};
handle = () => {
console.log('clear button pressed');
};
handleOptionsPress = () => {
console.log('options press');
};
render() {
return (
<Container>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<Header onPress={this.handleOptionsPress} />
<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}
/>
<LastConverted
date={TEMP_LAST_CONVERTED}
base={TEMP_BASE_CURRENCY}
quote={TEMP_QUOTE_CURRENCY}
conversionRate={TEMP_CONVERSION_RATE}
/>
<ClearButton text="clear" onPress={this.handle} />
</Container>
);
}
}
export default Home;
app/components/Header/images
mkdir app/components/Header/images
app/components/Header/images
app/components/Header/images
ou na linha de comando e de dentro do diretório CurrencyConverter
cd app/components/Header
curl https://www.filepicker.io/api/file/aoA8J6S6RKyTsJfdonzF --output images.zip
unzip images.zip
ls -l images
app/components/Header/Header.js
import PropTypes from 'prop-types';
import React from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import styles from './styles';
const Header = ({ onPress }) => (
<View style={styles.container}>
<TouchableOpacity onPress={onPress} style={styles.button}>
<Image resizeMode="contain" source={require('./images/gear.png')} style={styles.icon} />
</TouchableOpacity>
</View>
);
Header.propTypes = {
onPress: PropTypes.func,
};
export default Header;
app/components/Header/styles.js
import EStyleSheet from 'react-native-extended-stylesheet';
import { StatusBar } from 'react-native';
export default EStyleSheet.create({
container: {
position: 'absolute',
left: 0,
top: 0,
right: 0,
'@media ios': {
paddingTop: 20,
},
'@media android': {
paddingTop: StatusBar.currentHeight,
},
},
button: {
alignSelf: 'flex-end',
paddingVertical: 5,
paddingHorizontal: 20,
},
icon: {
width: 18,
},
});
app/components/Header/index.js
import Header from './Header';
import styles from './styles';
export { Header, styles };
app/components/Header/Header.js
import PropTypes from 'prop-types';
import React from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import styles from './styles';
const Header = ({ onPress }) => (
<View style={styles.container}>
<TouchableOpacity onPress={onPress} style={styles.button}>
<Image resizeMode="contain" source={require('./images/gear.png')} style={styles.icon} />
</TouchableOpacity>
</View>
);
Header.propTypes = {
onPress: PropTypes.func,
};
export default Header;
app/components/Header/styles.js
import EStyleSheet from 'react-native-extended-stylesheet';
import { StatusBar } from 'react-native';
export default EStyleSheet.create({
container: {
position: 'absolute',
left: 0,
top: 0,
right: 0,
'@media ios': {
paddingTop: 20,
},
'@media android': {
paddingTop: StatusBar.currentHeight,
},
},
button: {
alignSelf: 'flex-end',
paddingVertical: 5,
paddingHorizontal: 20,
},
icon: {
width: 18,
},
});
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';
import { LastConverted } from '../components/Text';
import { Header } from '../components/Header';
const TEMP_BASE_CURRENCY = 'USD';
const TEMP_QUOTE_CURRENCY = 'GBP';
const TEMP_BASE_PRICE = '100';
const TEMP_QUOTE_PRICE = '79.74';
const TEMP_LAST_CONVERTED = new Date();
const TEMP_CONVERSION_RATE = 0.79739;
class Home extends Component {
handleChangeText = () => {
console.log('change text');
};
handlePressBaseCurrency = () => {
console.log('press base currency');
};
handlePressQuoteCurrency = () => {
console.log('press quote currency');
};
handle = () => {
console.log('clear button pressed');
};
handleOptionsPress = () => {
console.log('options press');
};
render() {
return (
<Container>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<Header onPress={this.handleOptionsPress} />
<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}
/>
<LastConverted
date={TEMP_LAST_CONVERTED}
base={TEMP_BASE_CURRENCY}
quote={TEMP_QUOTE_CURRENCY}
conversionRate={TEMP_CONVERSION_RATE}
/>
<ClearButton text="clear" onPress={this.handle} />
</Container>
);
}
}
export default Home;