• This article is Marno original, reprint must retain source!
  • Public account [Marno], after concern RN to join the exchange group
  • React Nativewww.marno.cn

Today is Valentine’s Day. Happy Valentine’s Day to anyone who has a date. Happy Valentine’s Day to anyone who doesn’t have a date. Ha ha ~

preface

When I first wrote the React Native project, I did not deliberately manage image resources, and directly wrote a relative reference address for each image used. But as the number of images in the project increased, I found myself in trouble. Whether it is to change the name of the picture, or to replace the picture is more troublesome.

How to manage images efficiently in React Native projects? Combined with the articles written by some bloggers on the Internet, as well as their own experience in developing projects, I have summarized the following points.

tool

The first is the choice of development tool, I use WebStrom, one is that I am used to JetBrains bucket, the second is that it really works, and in terms of managing pictures, it has the following advantages:

Image Jump Press the Commond (or CTRL) key and click the reference address of the image to automatically jump to the image resource. If you find that you can’t jump properly, you’d better check to see if you have the wrong path.

Global renaming When renaming an image, all references are automatically searched and the names in all referenced addresses are also renamed (try to close the server when renaming images).

Delete protection Many people use a text editor to write RN, but if you accidentally delete an image in use during development, the text editor will not tell you, but WebStrom will automatically find if the image is in use, and if so, will list all references to the address. Does not result in accidental deletion.

After installing the IconViewer plug-in, you can preview all image resources directly in the project directory tree structure, making it easier to find images. As for how to install WebStrom plug-ins, you can search for them on your own.

code

After the tools section, I’ll talk about how to manage image resources from the code. Without further ado, I’ll go straight to the next section.

Create a file. First, create a directory and file according to the following file structure.

  • Resource: Stores various resources used in the project (images, colors, common styles, etc.)
  • Imgs: Folder for storing images
  • Images.js: Image management class
  • Index.js: entry file

Edit Images. Js

/** * Created by marno on 2017/4/6 * Function: */export//Common Common: {ic_avatar: require('./imgs/avatar.jpg'),
        ic_back: require('./imgs/back.png'}, // home: {ic_light_off: require('./imgs/scanLigtOff.png'),
        ic_light_on: require('./imgs/scanLightOn.png'),
        ic_manual_input: require('./imgs/manualInput.png'),... },... }Copy the code

Export is used to export components in the index.js file

import Images from './Images'

export { Images}Copy the code

Called in another file

import {Images} from ".. /.. /resource/";

export default class Home extends Component {
    render() {return(
            <View style={styles.container}>
                 <Image source={Images.common.ic_avatar}> </View> ); }}Copy the code

Pay attention to

The image name in require must be a static string. If you need to fetch dynamically based on business logic, place conditional statements outside of require.

/ / right "Imagesource={require('./my-icon.png'} /> // var icon = this.props. Active?'my-icon-active' : 'my-icon-inactive';
<Image source={require('/' + icon + '.png'} /> // var icon = this.props. Active? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
`Copy the code

In the React Native project, if you need to adapt to different screen resolutions, you need to use the iOS image naming method, and use @2x and @3x to distinguish images with different resolutions (e.g. [email protected], [email protected]), so that the system will automatically select the corresponding picture according to the screen resolution.

Here, I would like to emphasize the corresponding relationship between several resolutions on iOS and Android. There are and only the following resolutions. If you use @3.5x or something like that, it may cause the application to crash (currently @2x is more resolution).

iOS Android
@ 0.75 x ldpi
@1x mdpi
@ 1.5 x hdpi
@2x xhdpi
@3x xxhdpi
@4x xxxhdpi

Image optimization Before App release, we can compress some large image resources to reduce the size of the installation package. I believe that mobile developers know this website: tinypng.com. Here is a recommended plugin: TinyPic, the official plugin store can be found, attached with the user guide: github.com/shenjiajun5…

conclusion

Tool intelligence is only a kind of auxiliary, only we develop good coding habits, to efficient management of project resources, I really can not go down….. That’s it! Ha ha ~

Feel free to comment on how to manage project images in the comments section, or follow my public account Marno and reply to RN. Join the DISCUSSION group of RN. (RN, not Run ha!)