rax-picture v2.2.1

Picture

Complex image component

Install

$ npm install rax-picture --save

Import

import Picture from 'rax-picture';

Props

resizeMode value：

• cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
• contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• stretch: Scale width and height independently, This may change the aspect ratio of the src.

(must set style.width && style.height)

Example

import {createElement, Component, render} from 'rax';
import ScrollView from 'rax-scrollview';
import 'rax-components'; // hack for rax-picture@0.2.5
import Picture from 'rax-picture';

class Demo extends Component {
  render() {
    return <ScrollView ref='scroll'>
       <Picture
         source={{
           uri: '//gw.alicdn.com/tfscom/tuitui/TB2jLF1lXXXXXc7XXXXXXXXXXXX_!!0-dgshop.jpg',
         }}
         style={{
           width: 375,
           height: 252
         }}
         lazyload={true}
         resizeMode="cover"
       />
    </ScrollView>;
  }
}
render(<Demo />);

Local image example

useing image-source-loader in webpack.config.js

import {createElement, Component, render} from 'rax';
import Image from 'rax-image';

class App extends Component {
  render() {
    return (
      <Image source={require('./path/to/your/image.png')}
        resizeMode="cover"
      />
    );
  }
}

render(<App />);