You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import React, {Component} from 'react';
|
|
|
|
import {Image, Text, View} from 'react-native';
|
|
|
|
|
|
|
|
export default class MyImage extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {view, data} = this.props;
|
|
|
|
|
|
|
|
if (view.layout) {
|
|
|
|
const maxHeight = view.layout.height * 0.5;
|
|
|
|
const maxWidth = view.layout.width * 0.9;
|
|
|
|
|
|
|
|
// What the width will be if the responsive limit kicks in
|
|
|
|
const widthResp = view.layout.width * 0.6;
|
|
|
|
|
|
|
|
const aspectRatio = data.width / data.height;
|
|
|
|
|
|
|
|
let setWidth = maxWidth;
|
|
|
|
let setHeight = maxWidth / aspectRatio;
|
|
|
|
|
|
|
|
if (setHeight > maxHeight) {
|
|
|
|
setWidth = widthResp;
|
|
|
|
setHeight = setWidth / aspectRatio;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View style={{paddingTop: 10, flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
|
|
<Image
|
|
|
|
style={{
|
|
|
|
width: setWidth,
|
|
|
|
height: setHeight,
|
|
|
|
borderColor: 'black',
|
|
|
|
borderWidth: 1,
|
|
|
|
borderRadius: 5,
|
|
|
|
}}
|
|
|
|
source={data.source}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<Text style={{alignSelf: 'center', padding: 20}}>Loading image...</Text>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|