Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
Objetivos:
List/ListItem
;List/ListItem
para renderizar em FlatList
.app/components/List
e app/components/List/images
app/components/List
os arquivos index.js
, styles.js
, ListItem.js
, Icon.js
, Separator.js
app/components/List/styles.js
app/components/List/Icon.js
app/components/List/Separator.js
app/components/List/ListItem.js
app/components/List/index.js
app/index.js
app/screens/CurrencyList.js
cd CurrencyConverter
yarn start
app/components/List
e app/components/List/images
mkdir app/components/List
mkdir app/components/List/images
com editor copie o conteúdo do arquivo do final desta página.
app/components/List
os arquivostouch app/components/List/index.js
touch app/components/List/styles.js
touch app/components/List/ListItem.js
touch app/components/List/Icon.js
touch app/components/List/Separator.js
app/components/List/styles.js
Com editor copie o conteúdo do arquivo do final desta página.
app/components/List/Icon.js
Com editor copie o conteúdo do arquivo do final desta página.
app/components/List/Separator.js
Com editor copie o conteúdo do arquivo do final desta página.
app/components/List/ListItem.js
Com editor copie o conteúdo do arquivo do final desta página.
app/components/List/index.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.
app/screens/CurrencyList.js
Com editor copie o conteúdo do arquivo do final desta página.
app/components/List/index.js
import ListItem from './ListItem';
import styles from './styles';
import Separator from './Separator';
import Icon from './Icon';
export { ListItem, styles, Separator, Icon };
app/components/List/Icon.js
import PropTypes from 'prop-types';
import React from 'react';
import { View, Image } from 'react-native';
import styles from './styles';
const Icon = ({ visible, checkmark }) => {
if (visible) {
const iconStyles = [styles.icon];
if (visible) {
iconStyles.push(styles.iconVisible);
}
return (
<View style={iconStyles}>
{checkmark
? <Image
source={require('./images/check.png')}
style={styles.checkIcon}
resizeMode="contain"
/>
: null}
</View>
);
}
return <View style={styles.icon} />;
};
Icon.propTypes = {
visible: PropTypes.bool,
checkmark: PropTypes.bool,
};
export default Icon;
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 }) => (
<TouchableHighlight onPress={onPress} underlayColor={styles.$underlayColor}>
<View style={styles.row}>
<Text style={styles.text}>{text}</Text>
{selected ? <Icon visible={visible} checkmark={checkmark} /> : <Icon />}
</View>
</TouchableHighlight>
);
ListItem.propTypes = {
text: PropTypes.string,
onPress: PropTypes.func,
checkmark: PropTypes.bool,
selected: PropTypes.bool,
visible: PropTypes.bool,
};
export default ListItem;
app/components/List/Separator.js
import React from 'react';
import { View } from 'react-native';
import styles from './styles';
const Separator = () => <View style={styles.separator} />;
export default Separator;
app/components/List/styles.js
import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
$underlayColor: '$border',
row: {
paddingHorizontal: 20,
paddingVertical: 16,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
backgroundColor: '$white',
},
text: {
color: '$darkText',
fontSize: 16,
},
separator: {
backgroundColor: '$border',
height: StyleSheet.hairlineWidth,
flex: 1,
marginLeft: 20,
},
icon: {
backgroundColor: 'transparent',
borderRadius: 15,
width: 30,
height: 30,
alignItems: 'center',
justifyContent: 'center',
},
iconVisible: {
backgroundColor: '$primaryBlue',
},
checkIcon: {
width: 18,
},
});
app/screens/CurrencyList.js
import React, { Component } from 'react';
import { FlatList, StatusBar, View } from 'react-native';
import { ListItem, Separator } from '../components/List';
import currencies from '../data/currencies';
const TEMP_CURRENT_CURRENCY = 'CAD';
class CurrencyList extends Component {
handlePress = () => {
console.log('row press');
};
render() {
return (
<View style=>
<StatusBar translucent={false} barStyle="light-content" />
<FlatList
data={currencies}
renderItem={({ item }) => (
<ListItem
text={item}
selected={item === TEMP_CURRENT_CURRENCY}
onPress={this.handlePress}
/>
)}
keyExtractor={item => item}
ItemSeparatorComponent={Separator}
/>
</View>
);
}
}
export default CurrencyList;
app/index.js
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import CurrencyList from './screens/CurrencyList';
EStyleSheet.build({
$primaryBlue: '#4F6D7A',
$white: '#FFFFFF',
$lightGray: '#F0F0F0',
$border: '#E2E2E2',
$inputText: '#797979',
$darkText: '#343434',
});
export default () => <CurrencyList />;