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/List/ListItem.js
app/screens/Options.js
app/index.js
cd CurrencyConverter
yarn start
app/components/List/ListItem.js
com editor copie o conteúdo do arquivo do final desta página.
app/screens/Options.js
touch app/screens/Options.js
com editor copie o conteúdo do arquivo do final desta página.
app/index.js
Com editor copie o conteúdo do arquivo do final desta página.
Será substituído a apresentação da tela CurrencyList
pela tela Options
app/components/List/ListItem.js
import PropTypes from 'prop-types';
import React from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
import styles from './styles';
import Icon from './Icon';
const ListItem = ({
text,
onPress,
checkmark = true,
selected = false,
visible = true,
customIcon = null,
}) => (
<TouchableHighlight onPress={onPress} underlayColor={styles.$underlayColor}>
<View style={styles.row}>
<Text style={styles.text}>{text}</Text>
{selected ? <Icon visible={visible} checkmark={checkmark} /> : <Icon />}
{customIcon}
</View>
</TouchableHighlight>
);
ListItem.propTypes = {
text: PropTypes.string,
onPress: PropTypes.func,
checkmark: PropTypes.bool,
selected: PropTypes.bool,
visible: PropTypes.bool,
customIcon: PropTypes.element,
};
export default ListItem;
app/screens/Options.js
import React, { Component } from 'react';
import { ScrollView, StatusBar, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ListItem, Separator } from '../components/List';
const ICON_PREFIX = Platform.OS === 'ios' ? 'ios' : 'md';
const ICON_COLOR = '#868686';
const ICON_SIZE = 23;
class Options extends Component {
handlePressThemes = () => {
console.log('press themes');
};
handlePressSite = () => {
console.log('press site');
};
render() {
return (
<ScrollView>
<StatusBar translucent={false} barStyle="default" />
<ListItem
text="Themes"
onPress={this.handlePressThemes}
customIcon={
<Ionicons name={`${ICON_PREFIX}-arrow-forward`} size={ICON_SIZE} color={ICON_COLOR} />
}
/>
<Separator />
<ListItem
text="Fixer.io"
onPress={this.handlePressSite}
customIcon={<Ionicons name={`${ICON_PREFIX}-link`} size={ICON_SIZE} color={ICON_COLOR} />}
/>
<Separator />
</ScrollView>
);
}
}
export default Options;
app/index.js
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import Options from './screens/Options';
EStyleSheet.build({
$primaryBlue: '#4F6D7A',
$white: '#FFFFFF',
$lightGray: '#F0F0F0',
$border: '#979797',
$inputText: '#797979',
$darkText: '#343434',
});
export default () => <Options />;