react-native-easy-app is a pure JS library that provides basic services for the rapid development of React Native App ( supports IOS & Android ), especially in the initial stage of project construction from 0 to 1, it can reduce developers by at least 30% workload.
react-native-easy-app mainly does these tasks:
1. Encapsulates AsyncStorage, and developers can implement a persistent data manager with just a few lines of code.
2. Encapsulate fetch, so that developers only need to pay attention to the front-end and back-end interaction logic and protocols of the current app, and define parameter settings and parsing logic.
3. Repackaged View, Text, Image, FlatList of RN. These controls support events or support icons and text when appropriate, which can effectively reduce the nested logic in the layout.
4. By setting a screen reference size, reset the size of XView, XText, and XImage to achieve automatic multi-screen adaptation
Some people may think that the adaptation of RN generally scales the current UI size according to the size of the target screen.
In the hearts of a thousand people, there are a thousand Hamlets. Maybe my packaging ideas can bring you different inspirations?
UI multi-screen adaptation
The default size of the RN platform is unitless, and uses device-independent pixels. However, as the size of mobile phones is increasing, for example, the same size and different pixel densities result in different physical sizes of the UI, so generally speaking , we need to scale the size of the UI according to the size of the screen.
However, there are too many size attributes in the UI, and the corresponding size ratio method is called every time to calculate, which not only looks unsightly but also increases the amount of code. Is there a better way?
The current implementation idea of the development library is to reset the style attribute of the incoming component through the redefinition of XView, XText, and XImage (reset all attribute values related to size to the value after multiplying the scaling ratio). As for the size property of the UI, it can be found in the React Native source code (currently defined in the form of a whitelist). In this way, multi-screen adaptation can be automatically realized without any special processing when using the above X series components to list UI components.
Of course, the premise of X-series component support is to set a reference screen size (the reference screen size used when designing the UI), the code is as follows:
XWidget.initReferenceScreen(375, 667); //iphone 6 屏幕
Let's find a UI to see the difference before and after adaptation (list page of the sample project, before and after adaptation):
5s_iphoneX_iphone Xs Max_before.png
5s_iphoneX_iphone Xs Max_after.png
It can be seen that the UI is more obvious on the 5S screen after adaptation (the corresponding UI size is reduced).
The UI layout page is adapted as follows (the UI component page of the sample project, before and after adaptation):
5s_iphoneX_iphone Xs Max_UI_before.png
5s_iphoneX_iphone Xs Max_UI_after.png
The performance is still obvious on the 5S. Before the adaptation, the height and width of the UI components are not very coordinated, especially the Image component is relatively crowded, but after the adaptation, it is more natural. On the Xs Max, the UI components are smaller than before, and after adaptation, the corresponding ones are enlarged and appear natural (the UI size on large screens and high-resolution screens is too small to look difficult)
Some students may think that the X series components have been adapted to the screen, but in some special cases, they may not need to be adapted. For example, the outer container component (sometimes a fixed value is set), at this time, there are two ways:
- Use system native components instead
- Set the X series component property raw = {true}, set this property, the current UI size will not do any scaling
**So when you need to do multi-screen adaptation to the UI of the app, just use as many X series components as possible (remember to set the reference screen) **
If you want to know more, please go to npm or github to check react-native-easy-app , there are source code and usage examples , wait for everyone to find out, welcome friends Star!
If you have any questions, please scan the code to join the RN technology QQ exchange group
