React Native Easy-App is a pure JS library (supported by IOS and Android) that provides basic services for rapid development of React Native App. Especially in the initial stage of 0-1 project construction, it can reduce the workload of developers by at least 30%.

React-native Easy-App does the following: 1. By encapsulating AsyncStorage, developers can implement a persistent data manager with just a few lines of code. 2. Fetch is encapsulated so that developers only need to pay attention to the front and back interaction logic and protocol of the current App, and define parameter setting and parsing logic. 3. Reencapsulated RN View, Text, Image and FlatList controls support events or support ICONS and Text when appropriate, which can effectively reduce the nesting logic in the layout. 4. Reset the size of XView, XText, and XImage by setting a screen reference size to achieve automatic multi-screen adaptation

Some people may feel that RN’s AsyncStorage itself is very simple and encapsulates only dozens of lines of code, so why use a third-party library?

In the heart of a thousand people, there are a thousand Hamlets, perhaps my encapsulation thinking can bring you different inspiration also unknown?

Data storage (AsyncStorage)

RN provides AsyncStorage with some basic methods: SetItem, getItem, removeItem, getAllKeys, these are promise mode and AsyncStorage only supports access to pure strings, so it is not convenient to call these methods directly in code. We have to do a encapsulation of AsyncStorage, how can encapsulation make us more convenient access to local access?

Let’s look at how AsyncStorage can be accessed using the React-native easy-app library XStorage:

1. Core code implementation

import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';

letRNStorage = {// User-defined object hasLogin: undefined, customerId: undefined, userInfo: undefined}; Xstorage.initstorage (RNStorage, AsyncStorage, () => {// Initialize the custom data manager rnStorage.customerId ='123456';
    RNStorage.hasLogin = true;
    RNStorage.userInfo = {name: 'zhangsan', age: 30}; Console. log(json.stringify (RNStorage)) // Prints the contents of the data manager})Copy the code

After executing the above code, let’s look at the console output:

Data /data/{package}/database

😲? RNStorage is stored in the local database. This code does not do any database storage operations. Let’s look at what we do in the code above:

  1. Defines a custom object RNStorage
  2. Pass the custom object to xstorage.initStorage for initialization
  3. The properties of RNStorage are assigned after initialization
  4. Prints the contents of RNStorage

Thus, the data storage operation must be caused by steps 2 and 3 above. XStorage XStorage XStorage XStorage XStorage XStorage

  • The source code 1
Object.keys(targetObj).map(key => {
    const keyStr = newKey(Tag, key);
    Object.defineProperty(targetObj, key, {
        get: () => {
            return this[keyStr]
        },
        set: (value) => {
            try {
                this[keyStr] = value;
                const valueStr = (typeof value === 'object')? JSON.stringify(value) : String(value); keyValuesPairs.push([keyStr, valueStr]) } catch (exception) { console.log(exception && exception.message); }}})});setInterval(() => {
    if(! isEmpty(keyValuesPairs)) {letsaveDataArray = [...keyValuesPairs]; keyValuesPairs = []; Asyncstorage. multiSet(saveDataArray, () => {dataChangedCallback && dataChangedCallback(saveDataArray)}); }}, 2500).Copy the code

  • The source code 2
const Keys = Object.keys(storageObj); const StorageKeys = Keys.map(key => newKey(Tag, key)); // When initializing, MultiGet (StorageKeys). Then (keyValuePairs => {keyValuePairs. Map (([keyStr, keyStr, keyStr, keyValuePairs => {keyValuePairs. value]) => {let [, key] = keyStr.split(splitTag);
        if(persistTag ! == key && ! isEmpty(value)) { storageObj[key] = convertData(value) } });setTimeout(() => initializedCallback(), 100)
}).catch(error => {
    console.log(error)
})
Copy the code

XStorage uses getter and setter generators to associate the value of each field in the data table of user defined RNStorage and AsyncStorage to form a binding relationship. When the user assigns and values the properties of RNStorage, getter and setter generators will be triggered, and the data table in AsyncStorage will be read and written accordingly.

Balance of efficiency and performance

  • < read > When initializing XStorage, all fields in AsyncStorage will be read into RNStorage object at one time, so that the subsequent reading of properties does not need to go through AsyncStorage, but directly return RNStorage properties.
  • < write > When modifying the property value of XStorage, the developer will first assign the target data to the property value of XStorage, and then asynchronously write the target data to the database through AsyncStorage. (Considering the efficiency and performance of data writing, the current processing mode is as follows: Every value change will be recorded, and the timing program will write data in batches every 2.5 seconds), but this will not affect the operation of App on data, because the data in RNStorage is real-time and synchronous.

It’s completely clear at this point, isn’t it simple? Developers use react-native-easy-app only needs to define a global exportable RNStorage object (name it arbitrarily, and define the required properties of the APP), and then initialize the RNStorage through the XStorage when the app starts. After direct access to the attribute values of RNStorage line (all RNStorage attribute changes are automatically synchronized to AsyncStorage), is once and for all…

React-native Easy app (1) Fetch

For more information, please go to NPM or Github to check out the React-Native Easy-app, which has the source code and usage examples. Welcome friends Star!

If you have any questions, please scan code to join RN QQ communication group