Não sei se é por causa da minha versão do react-native seja mais nova
Código App:
/**
App
*/
import React, { Fragment } from 'react';
import {
Dimensions,
FlatList,
StyleSheet,
} from 'react-native';
import Post from './src/component/Post';
const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width
const App = () => {
const fotos = [
{id: 1, usuario: 'rafael'},
{id: 2, usuario: 'alberto'},
{id: 3, usuario: 'vitor'}
];
return (
<FlatList style={styles.container}
keyExtractor={item => item.id}
data={fotos}
renderItem={ ({item}) =>
<Post foto={item}/>
}
/>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 20
},
cabecalho: {
margin: 10,
flexDirection: 'row',
alignItems: 'center'
},
fotoDePerfil: {
marginRight: 10,
borderRadius: 20,
width: 40,
height: 40
},
fotoDoPost: {
width: width,
height: width
}
});
export default App;
Código Post:
/**
Post
*/
import React, { Fragment } from 'react';
import {
View,
Text,
Image,
Dimensions,
StyleSheet,
} from 'react-native';
const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width
const App = () => {
return (
<View>
<View style={styles.cabecalho}>
<Image source={require('../../resources/img/alfinete.png')}
style={styles.fotoDePerfil} />
<Text>{this.props.foto.usuario}</Text>
</View>
<Image source={require('../../resources/img/alfinete.png')}
style={styles.fotoDoPost} />
</View>
);
};
const styles = StyleSheet.create({
cabecalho: {
margin: 10,
flexDirection: 'row',
alignItems: 'center'
},
fotoDePerfil: {
marginRight: 10,
borderRadius: 20,
width: 40,
height: 40
},
fotoDoPost: {
width: width,
height: width
}
});
export default App;
Tirei prints do que está retornando: você pode acessá-los por esse link do google drive: https://drive.google.com/open?id=1P7rGVgJBkRhLBf7Tc8_rj7bPLTRwtm1I