This article mainly introduces the detailed explanation of the use of ReactNative Image component. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.
It’s been quite interesting to learn ReactNative recently. During the learning process, I found that the content of articles written by some people on the Internet is outdated. This is mainly because the version of ReactNative is upgraded too quickly. If you now read an article written in 16 or even 15 years, and compare the knowledge points with official documents, you will be surprised. Therefore, I advise students who want to learn ReactNative to choose learning materials based on official documents and official demos, and other materials as supplements.
Image component
In ReactNative, Image is a component used to display images, which has the same effect as the ImageView control when developing Android. It can be used to display network images, static resources, temporary local images, and images on the local disk (such as photo albums), etc. Proper use of Image components can convey information to users more vividly and intuitively.
Image component loads static resources in the project
The static resources here refer to the images in the js part that are loaded, and are not resources under native applications of android and ios file, to load this kind of image resource, we introduce the image file through require('the path of the image file relative to this file directory') and set it to the source attribute of the Image component. As follows
<Image style={styles.image} // ./表示当前文件目录 ../ 父目录 source={require('./reactlogo.png')} />
One thing to note is that the path cannot be spliced with strings in the above require, otherwise a loading error will be reported.
Loading native image resources
The native resources mentioned here refer to the drawable in the res directory when we develop Android, or the mipmap directory. And the corresponding resource directory under ios. Loading this kind of image resources is a little different from loading resources in the project. Here we take android as an example. Load the file under drawable as follows
##
<Image source={{uri: 'launcher_icon'}} style={{width: 38, height: 38}} />);In addition to loading through the above method, You can specify the image width and height in the nativeImageSource in the following way
<Image source={nativeImageSource({ android: 'launcher_icon', width: 96, height: 96 })} />. If you set the width and height in the style attribute of the image component at the same time, the final width and height will be based on the style medium width. Whichever is higher. The image resources under drawable are loaded by default above. If you want to load the resources in mipmap, you can do as follows
<Image source={nativeImageSource({ android: 'mipmap/launcher_icon', width: 96, height: 96 })} />Through the above method, we can load the image. If The pictures newly added to the drawable need to be recompiled and run, otherwise they will not take effect.
Loading network images
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 38, height: 38}} />);One thing to note about loading network images is that you need to specify the width and height of the style, otherwise The image will not be displayed (the default width and height are not set to 0 anymore).
Commonly used attributes of the Image component
- width: Set the width of the image
- height: Set the height of the picture
- borderWidth: Set the border width
- borderColor: Set the border Color
- backgroundColor: Set the background color (this property is generally used when some pictures have transparent backgrounds)
- opacity: Opacity, The value is between 0 and 1, where 1 means opaque and 0 means transparent.
- tintColor: Colorize the picture. This attribute is more useful. For example, a black and white picture will often turn into another color picture when clicked. This attribute can be used at this time
<Image style={{flex: 1}} source={[ {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38}, {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76}, uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400} ]} />resizeModeThis attribute is used to set the zoom mode of the image, the corresponding value is as follows
- cover: Maintain the aspect ratio of the image until the width and height are greater than or equal to the size of the container view (refer to the effect below)
- contain: Maintain the aspect ratio of the image Under the premise, scale the image until the width and height are less than or equal to the size of the container view
- stretch: Stretch the image without maintaining the aspect ratio until the width and height just fill the container
- center Center without stretching
- repeat: Repeat tile the image until it fills the container. The image will maintain its original size. (iOS)
Default Android does not support GIF and WebP formats. You need to add the corresponding dependencies as needed in the build.gradle file.
dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) compile 'com.facebook.fresco:animated-base-support:1.0.1' // For animated GIF support compile 'com.facebook.fresco:animated-gif:1.0.1' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:1.0.1' compile 'com.facebook.fresco:webpsupport:1.0.1' // For WebP support, without animations compile 'com.facebook.fresco:webpsupport:1.0.1' }
If you use ProGuard while using GIF, you need to add the following rules to proguard-rules.pro
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }
ImageBackground
该组件是Image组件的扩展,它支持嵌套组件。如在图片上显示一个文本,则可以通过如下实现 实现效果图如下,一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载,当加载完成隐藏此控件。 网络图片加载监听 对于网络图片的加载,ReactNative提供了一些属性用于图片不同加载时期的监听。 onLoadStart:图片开始加载时调用 onLoad:图片加载完成时调用,此时图片加载成功 onLoadEnd:加载结束后调用,与onLoad不同的是不论成功还是失败,此回调函数都会被执行。 使用方法如下 对于iOS,还提供了加载进度的回调函数onProgress 可以通过参数event.nativeEvent.loaded获取已经加载的大小,通过event.nativeEvent.total获取图片的总大小。 不仅如此,ReactNative还提供了预加载图片函数prefetch(url: string),它可以将图片下载到磁盘缓存 好了,今天就介绍到这里,文中若有错误的地方欢迎指正,再次感谢。文中一些示例源码,可前往GitHub在线预览,也可以下载项目学习其他组件。 <ImageBackground
style={{width: 100, height: 100, backgroundColor: 'transparent'}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
>
<Text style={styles.nestedText}>
React
</Text>
</ImageBackground>
<Image
source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
style={[styles.base, {overflow: 'visible'}]}
onLoadStart={() => console.log('onLoadStart')}
onLoad={(event) => console.log('onLoad') }
onLoadEnd={() => console.log('onLoadEnd')}
/>
<Image
style={styles.image}
onProgress={(event) => {
console.log('onProgress')
this.setState({
progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total)
})}}/>
var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');
prefetchTask.then(() => {
//此处可设置状态,显示Image组件。此时组件会使用预加载的图片信息。而不用再次加载
console.log('加载图片成功')
}, error => {
console.log('加载图片失败')
})
The above is the detailed content of Detailed introduction to ReactNative Image component. For more information, please follow other related articles on the PHP Chinese website!

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

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 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.

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.

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 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.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

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.

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Zend Studio 13.0.1
Powerful PHP integrated development environment
