search
HomeWeb Front-endJS TutorialIntroduction to Image control in React-native

Introduction to Image control in React-native

Jun 29, 2017 am 11:24 AM
imagereact-nativecontrol

1. Introduction

A React component used to display many different types of images, including network images, static resources, temporary local images, and Pictures on local disk (such as photo album), etc.
Starting from version 0.14, React Native provides a unified way to manage images in iOS and Android applications. To add a static image to your App, just place the image file somewhere in the code folder such as img, and then reference it like this:
<image source="{require('./img/check.png')}"></image>
If you have my-icon.ios.png and my-icon.android.png, Packager Different files are selected depending on the platform.
You can also use file name suffixes such as @2x and @3x to provide images for different screen resolutions. For example, the following code structure:
------ button.js
------ img
------ |-------- check@2x.png
------ |-------- check@3x.p
Packager will package all images and provide corresponding resources according to screen accuracy. For example, iPhone 5s will use check@2x.png, while Nexus 5 will use check@3x.png. If there is no image that exactly meets the screen resolution, the closest image will be automatically selected.
[Note] If the packager is running when you add images, you may need to restart the packager so that the newly added images can be correctly introduced. In order for the new image resource mechanism to work properly, the image name in require must be a static string and cannot be spliced ​​in require.
//Correct
<image source="{require('./my-icon.png')}"></image>
Error
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<image source="{require('./'" icon></image>

Using the image resources of hybrid App

If you are writing a hybrid App (part of the UI uses React Native, and the other part uses platform native code), you can also use the image resources that have been packaged into the App. Image resources (packaged through Xcode's asset category or Android's drawable folder):
<image source="{{uri:" style="{{width:" height:></image>
Note: This approach does not have any security checks. You need to ensure that the image actually exists in the application yourself, and also need to specify the size.

Load network images

Different from static resources, you need to manually specify the size of the image.
//Correct
<image source="{{uri:" png style="{{width:" height:></image>
//Error
<image source="{{" uri:></image>

Why not specify the size in all cases

In the browser, if you do not specify the size of the image, the browser will first render a 0x0 size The element takes the place, then downloads the image, and then renders the image based on the correct size after the download is completed. The biggest problem with this is that the UI will jump up and down during the image loading process, making the user experience very bad.
In React This behavior is intentionally avoided in Native. This will require developers to do more work to know the size (or aspect ratio) of the remote image in advance, but we believe this can lead to a better user experience. However, when reading images from packaged application resource files (using the require('image!x') syntax), there is no need to specify the size, because their size is known immediately when loading.
For example, the actual output result of such a reference require('image!logo') may be:
{"__packager_asset":true,"isStatic" :true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}

Realizing background images through nesting

Similar to the background-image in the web, just create it simply An component, and then embed the sub-component that requires a background image into it
return ( <image source="{...}"> <text>Inside</text> </image> );

Support GIF and WebP format images on Android

dependencies {
// If you need to support versions before Android4.0 (API level 14)
compile 'com.facebook.fresco:animated-base-support:0.11.0'

// If you need to support GIF animation
compile 'com.facebook.fresco:animated-gif:0.11.0'

// If you need to support WebP format, including WebP animations
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'

// If you only need to support WebP format without moving images
compile 'com .facebook.fresco:webpsupport:0.11.0'
}
If you are using GIF and also using ProGuard, you need to set it in proguard-rules.pro Add the following rules:
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline .core.ExecutorSupplier); }

2. Attributes

##1.onLayout (function) When the Image layout changes, this method will be called. The calling code is:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function): When the image is loaded successfully, call back this method
3.onLoadEnd (function): This method is called back when the image fails to load, regardless of whether the image is loaded successfully or failed
4.onLoadStart (fcuntion): When the image starts to load This method is called when
5.resizeMode scaling ratio, optional parameters ('cover', 'contain', 'stretch') When the size of the image exceeds the size of the layout, the Mode will be set according to Scale or crop the image
cover: Scale the image while maintaining the aspect ratio of the image until the width and height are greater than or equal to the size of the container view (if the container has padding, then accordingly minus). Annotation: In this way, the image completely covers or even exceeds the container, leaving no blank space in the container.
contain: Scale the image while maintaining the aspect ratio of the image until the width and height are less than or equal to the size of the container view (if the container has padding, subtract accordingly). Translation Note: In this way, the image is completely wrapped in the container, and there may be some blank space in the container.
stretch: Stretch the image without maintaining the aspect ratio until the width and height just fill the container.
repeat: Repeat tiles until the container is filled. The image will maintain its original size. Available for iOS only.
center: Centered without stretching.
6.source {uri:string} refers to the marked image. This parameter can be a network URL address or a local (use require (relative path) to reference) path

3. Style

1.FlexBox supports flexible box style
2.Transforms supports attribute animation 3.resizeMode setting Zoom mode
4.backgroundColor background color
5.borderColor border color 6.borderWidth border width
7.borderRadius border rounded corner
8.overflow If the image size exceeds the container, you can set the display or hide ('visible', 'hidden')
9.tintColor color setting 10.opacity setting Transparency 0.0 (transparent)-1.0 (completely opaque)

四. 示例

加载网路图片的例子
class MyImageDemo extends Component {    render() {        return (            <view style="{[styles.flex,{marginTop:45}]}">                <myimage imgs="{imgs}"> </myimage>            </view>        );    } }
class MyImage extends Component {    constructor(props) {        super(props);        this.state = {            count: 0,//图片索引            imgs: this.props.imgs,        };    }
render() {        return (            <view style="{[styles.flex,{alignItems:'center'}]}">                <view style="{styles.image}">                    <image style="{styles.img}" resizemode="contain" source="{{uri:this.state.imgs[this.state.count]}}/">                </image></view>                <view style="{styles.btns}">                    <touchableopacity onpress="{this.onPrevious.bind(this)}"><view><text>上一张</text></view></touchableopacity></view></view>
<touchableopacity onpress="{this.onNext.bind(this)}"><view style="{styles.btn}"><text>下一张</text></view></touchableopacity>                        );    }
onPrevious() {        var count = this.state.count;        count--;        if (count >= 0) {            this.setState({                count: count,            });        }    }    onNext() {        var count = this.state.count;        count++;        if (count
const styles = StyleSheet.create({        flex: {            flex: 1,        },        image: {            width: 300,            height: 200,            borderWidth: 1,            justifyContent: 'center',            alignItems: 'center',            borderColor: '#ccc',            borderRadius: 5,        },        img: {            width: 200,            height: 150,        },        btn: {            width: 60,            height: 35,            borderWidth: 1,            borderColor: '#ccc',            borderRadius: 3,            justifyContent: 'center',            alignItems: 'center',            marginRight: 30,        },        btns: {            flexDirection: 'row',            marginTop: 20,            justifyContent: 'center'        }    } );

效果


Image_first.jpeg


点击下一张


Image_second.jpeg


点击下一张


Image_third.jpeg

记录我自己的RN学习之路,纯属自己增值,有什么不对的地方,一起讨论进步

The above is the detailed content of Introduction to Image control in React-native. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Behind the Scenes: What Language Powers JavaScript?Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsThe Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function