React-native Demo (7)-picture control

Image Image

Control Properties that show a picture

name	type	meaning	Default Value
OnLayout	function	function to invoke this property setting when layout changes	No
ResizeMode	Enum	What rules are taken to adjust the picture when the size of the control does not match (' cover ', ' contain ', ' stretch ')	Cover
Source	{uri:string}, number	Specify a picture resource	No
Style	Style	Style	No
TestID	String	The ID number used in the UI Automation test script	No
Accessibilitylabel	String	(iOS-specific) users can interact with the image control through this text	No
Accessible	bool	(iOS-specific) refers to whether the control is a accessibility element	True
Capinsets	{top:number, Left:number, Bottom:number, Right:number}	(iOS-specific) to set the layout when resizing a picture	No
DefaultSource	{uri:string}	(iOS-specific) a static picture that appears by default when the network is disconnected	No
OnError	function	(iOS-specific) functions that are called when a download fails	No
OnLoad	function	(iOS-specific) function called after completion of call to load function	No
Onloadend	function	Functions that are called after a success or failure (unique to iOS) after a load is completed	No
Onloadstart	function	(iOS-specific) load start	No
OnProgress	function	(iOS-specific) loading	No

Example network resources

<image Source={{uri: ' Https://facebook.github.io/react/img/logo_og.png '}} style={{width:400, height:400}}/>

It is best to set the size of the image control, if you do not set it, it may not appear. Static Resources

1. First create our picture folder under the project's Images.xcassets folder:

I named Logo.imageset, suffix to end with ImageSet. Put our pictures in this folder:

Note that the file name of the picture in this place is identical to the name of the folder.

2. This time we go back to Xcode and click on the Images.xcassets folder in the project:

This time you can see the image under the Logo folder, we drag the picture from the Unassigned column to the above 1x 2x 3x Random column, and then build the project again.

3. Add the image control to the React-native project:

var React = require (' react-native ');

var {
    Image,
    appregistry,
    StyleSheet,
    View,
} = React;

    var HelloWorld = React.createclass ({

    render:function () {
        return (
        <image source={require (' Image!logo ') )} style={{width:400, height:400}}/>
        );
    }
    );

var styles = Stylesheet.create ({


});

Appregistry.registercomponent (' Hellowrold ', () = HelloWorld);

As you can see from the source, the strange thing about importing a static picture is to use the Require statement to import it into the image control as a module.

4. Effects

Android

Experiment through the Android version, just like the code.