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.
49 lines
1.1 KiB
49 lines
1.1 KiB
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> |
|
); |
|
} |
|
} |
|
}
|
|
|