Resizing images
The width
and height
style properties of Image
components determine the size of what's rendered on the screen. For example, you'll probably have to work with images at some point that have a larger resolution than you want displayed in your React Native application. Simply setting the width
and height
style properties on the Image
is enough to properly scale the image.
Let's look at some code that lets you dynamically adjust the dimensions of an image using a control:
import React, { Component } from 'react'; import { AppRegistry, View, Text, Image, Slider, } from 'react-native'; import { fromJS } from 'immutable'; import styles from './styles'; class ResizingImages extends Component { // The initial state of this component includes // a local image source, and the width/height // image dimensions. state = { data: fromJS({ source: require...