56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { Text, View, StyleSheet } from 'react-native';
|
|
|
|
import ProgressiveImage from "../components/ProgressiveImage";
|
|
const defaultImage = 'https://icon-library.com/images/full_name_1346459_83431.png';
|
|
|
|
const PersonDetailScreen = (props) => {
|
|
const person = props.navigation.getParam('person');
|
|
return(
|
|
<View style={styles.screen}>
|
|
<ProgressiveImage style={styles.bannerImage}
|
|
uri={person.image}
|
|
loadingUri={defaultImage}
|
|
errorUri={defaultImage}
|
|
resizeMode={'contain'}
|
|
/>
|
|
<View style={styles.titleContainer}>
|
|
<Text style={styles.titleText}>{person.name}</Text>
|
|
</View>
|
|
<Text style={styles.bodyText}>{person.birthday.toString()}</Text>
|
|
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: {
|
|
width: '100%',
|
|
height: '100%'
|
|
},
|
|
bannerImage: {
|
|
width: '100%',
|
|
height: 300
|
|
},
|
|
titleContainer: {
|
|
height: 50,
|
|
width: '100%',
|
|
backgroundColor: 'rgba(170, 170, 170, 0.7)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
},
|
|
titleText: {
|
|
fontWeight: 'bold',
|
|
fontSize: 25
|
|
},
|
|
bodyContainer: {
|
|
width: '100%',
|
|
padding: 20,
|
|
},
|
|
bodyText: {
|
|
fontSize: 16,
|
|
lineHeight: 25
|
|
}
|
|
});
|
|
|
|
export default PersonDetailScreen; |