DEV Community

chende
chende

Posted on • Updated on

react-native-easy-app

react-native-easy-app (React Native One-stop solution)

查看中文文档

Instruction Manual

Installation

npm install react-native-easy-app --save

or

yarn add react-native-easy-app

Features

  • Support for fast synchronous access to AsyncStorage
  • Support for flexible Http requests through optional configuration
  • Support for Flexible base widget (no sensory multi-screen adaptation)

Quick Start

  • Data Storage : XStorage

    *Implement a persistent data store manager

        import { XStorage } from 'react-native-easy-app';
        import { AsyncStorage } from 'react-native';
    
        export const RNStorage = {// RNStorage : Custom data store object
            token: undefined, // Custom string value
            isShow: undefined, // Custom bool value
            userInfo: undefined, // Custom object
        };
    
        const initCallback = () => {
    
             // From now on, you can write or read the variables in RNStorage synchronously
    
             // be similar to [console.log(await AsyncStorage.getItem('isShow'))]
             console.log(RNStorage.isShow); 
    
             // be similar to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
             RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 
    
             // be similar to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
             RNStorage.userInfo = {name: 'rufeng', age: 30}; 
        };
    
        XStorage.initStorage(RNStorage, AsyncStorage, initCallback);   
    
  • Configurable Http request framework

    • All based on configuration (configuration optional, free to set)
      import { XHttpConfig } from 'react-native-easy-app';
    
      XHttpConfig().initHttpLogOn(true) // Print the Http request log or not
                    .initBaseUrl(ApiCredit.baseUrl) // BaseUrl
                    .initContentType(XHttpConst.CONTENT_TYPE_URLENCODED)
                    .initHeaderSetFunc((headers, request) => {
                       // Set the public header parameter here
                    })
                    .initParamSetFunc((params, request) => {
                     // Set the public params parameter here
                    })
                    .initParseDataFunc((result, request, callback) => {
                       let {success, json, response, message, status} = result;
                       // Specifies the specific data parsing method for the current app
                });
    
    • Send request template
        import { XHttp } from 'react-native-easy-app';
    
        let url = 'v1/account/login/';
        let param = {phone: '18600000000', authCode: '123456'};
        let header = {Authorization: "Basic Y3Rlcm1pbmF......HcVp0WGtI"};
        let callback = () => (success, json, message, status) => { // Request a result callback
             if (success) {
                showToast(JSON.stringify(json))
             } else {
                showToast(msg)
             }
        };
    
        * Settable parameters are spliced in builder form
        XHttp().url(url)
            .param(param)
            .header(header)
            .internal()
            .rawData()
            .pureText()
            .encodeURI()
            .timeout(10000)
            .extra({tag: 'xx'})
            .contentType('text/xml')
            .resendRequest(data, callback) // Rerequest (used to refresh accessToken to resend a request that has failed)
            .loadingFunc((loading)=> showLoading('Please wait for a moment ...', loading))
            .[formJson|formData|formEncoded]()
            .[get|post|put|patch|delete|options](callback);
    
    
    • request-send
         import {XHttp} from 'react-native-easy-app';
    
         const url = 'https://www.google.com';
    
         * Synchronous request
         const response = await XHttp().url(url).execute('GET');
         const {success, json, message, status} = response;
    
         if(success){
            this.setState({content: JSON.stringify(json)})
         } else {
            showToast(message)
         }
    
         * Asynchronous requests
         XHttp().url(url).get((success, json, message, status)=>{
             if (success){
                this.setState({content: JSON.stringify(json)});
             } else {
                showToast(msg);
             }
         });
    
         * Asynchronous requests
         XHttp().url(url).execute('GET')
         .then(({success, json, message, status}) => {
             if (success) {
                  this.setState({content: JSON.stringify(json)});
             } else {
                  showToast(message);
             }
          })
          .catch(({message}) => {
              showToast(message);
          })
        ```
    
    
     * Flexible base widget
    
    
    
    XImage
    XText
    XView
    XFlatList
    
    XImage Partial path online images depend on the Settings of image resource BaseUrl
    
    Can be configured as follows before use:
    
    XWidget
    .initResource(Assets)
    .initReferenceScreen(375, 677); // The component scales the reference screen size
    
    
    

Please refer to the detailed usage method example

Top comments (0)