Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
Objetivos:
app/components/Logo/styles.js
;app/components/Logo/Logo.js
;app/components/Logo/Logo.js
;app/components/Logo/Logo.js
portável;app/components/Header
cd CurrencyConverter
yarn start
app/components/Logo/styles.js
app/components/Logo/styles.js coloque dimensões (grande e pequeno) para o as imagens
import { Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const imageWidth = Dimensions.get('window').width / 2;
export default EStyleSheet.create({
$smallContainerSize: imageWidth / 2,
$smallImageSize: imageWidth / 4,
$largeContainerSize: imageWidth,
$largeImageSize: imageWidth / 2,
container: {
alignItems: 'center',
},
containerImage: {
alignItems: 'center',
justifyContent: 'center',
width: '$largeContainerSize',
height: '$largeContainerSize',
},
logo: {
width: '$largeImageSize',
tintColor: '$primaryBlue',
},
text: {
color: '$white',
fontSize: 28,
letterSpacing: -0.5,
marginTop: 15,
fontWeight: '600',
},
});
observações:
keyboardDidShow
e keyboardDidHide
) e iOS (keyboardWillShow
e keyboardWillHide
).app/components/Logo/Logo.js Android
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}).start();
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}).start();
};
keyboardWillHide = () => {
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}).start();
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
ou
app/components/Logo/Logo.js iOS
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardWillShow',
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardWillHide',
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}).start();
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}).start();
};
keyboardWillHide = () => {
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}).start();
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
app/components/Logo/Logo.js android
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, Platform, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
`keyboardDidShow`,
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
`keyboardDidHide`,
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
keyboardWillHide = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
ou
app/components/Logo/Logo.js iOS
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, Platform, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
`keyboardWillShow`,
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
`keyboardWillHide`,
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
keyboardWillHide = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
app/components/Logo/Logo.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, Platform, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
const name = Platform.OS === 'ios' ? 'Will' : 'Did';
this.keyboardDidShowListener = Keyboard.addListener(
`keyboard${name}Show`,
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
`keyboard${name}Hide`,
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
keyboardWillHide = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
app/components/Logo/Logo.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, Keyboard, Animated, Platform, StyleSheet } from 'react-native';
import styles from './styles';
const ANIMATION_DURATION = 250;
class Logo extends Component {
static propTypes = {
tintColor: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
containerImageWidth: new Animated.Value(styles.$largeContainerSize),
imageWidth: new Animated.Value(styles.$largeImageSize),
};
}
componentDidMount() {
const name = Platform.OS === 'ios' ? 'Will' : 'Did';
this.keyboardDidShowListener = Keyboard.addListener(
`keyboard${name}Show`,
this.keyboardWillShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
`keyboard${name}Hide`,
this.keyboardWillHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$smallContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$smallImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
keyboardWillHide = () => {
Animated.parallel([
Animated.timing(this.state.containerImageWidth, {
toValue: styles.$largeContainerSize,
duration: ANIMATION_DURATION,
}),
Animated.timing(this.state.imageWidth, {
toValue: styles.$largeImageSize,
duration: ANIMATION_DURATION,
}),
]).start();
};
render() {
const containerImageStyles = [
styles.containerImage,
{ width: this.state.containerImageWidth, height: this.state.containerImageWidth },
];
const imageStyles = [
styles.logo,
{ width: this.state.imageWidth },
this.props.tintColor ? { tintColor: this.props.tintColor } : null,
];
return (
<View style={styles.container}>
<Animated.View style={containerImageStyles}>
<Animated.Image
resizeMode="contain"
style={[StyleSheet.absoluteFill, containerImageStyles]}
source={require('./images/background.png')}
/>
<Animated.Image
resizeMode="contain"
style={imageStyles}
source={require('./images/logo.png')}
/>
</Animated.View>
<Text style={styles.text}>Currency Converter</Text>
</View>
);
}
}
export default Logo;
app/components/Logo/styles.js
import { Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const imageWidth = Dimensions.get('window').width / 2;
export default EStyleSheet.create({
$smallContainerSize: imageWidth / 2,
$smallImageSize: imageWidth / 4,
$largeContainerSize: imageWidth,
$largeImageSize: imageWidth / 2,
container: {
alignItems: 'center',
},
containerImage: {
alignItems: 'center',
justifyContent: 'center',
width: '$largeContainerSize',
height: '$largeContainerSize',
},
logo: {
width: '$largeImageSize',
tintColor: '$primaryBlue',
},
text: {
color: '$white',
fontSize: 28,
letterSpacing: -0.5,
marginTop: 15,
fontWeight: '600',
},
});