npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-fast-app

v1.5.8

Published

fast development library for react-native

Downloads

31

Readme

react-native-fast-app (RN 项目快速开发基础库)

重要提醒 !!!

当前开发库,已迁移至 react-native-easy-app,若需要升级到最新版本,请安装 react-native-easy-app

安装

npm install react-native-fast-app --save

或者

yarn add react-native-fast-app

功能点

  • 支持快捷[同步]访问AsyncStorage
  • 支持可配置的Http请求框架
  • 灵活的基础控件(无感知多屏适配)

快速开始

  • 数据存储RFStorage

    • 实现一个可持久化的数据存储管理类
       export const RNStorage = {// RNStorage 自定义数据存储对象
           token: undefined, //  字符串类型
           isShow: undefined, // 布尔类型
           userInfo: undefined, // 对象类型
       };
      import { RFStorage } from 'react-native-fast-app';
            
      const initCallback = () => {
           
           // 现在您可以同步访问RNStorage中的任何属性
                
           console.log(RNStorage.isShow); // 等价于 [ console.log(await AsyncStorage.getItem('isShow')) ]
                
           RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; // 等价于 [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
                
           RNStorage.userInfo = {name: 'rufeng', age: 30}; // 等价于 [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
      };
           
      RFStorage.initStorage(RNStorage, initCallback);
  • 支持可配置的Http请求框架

    • 一切基于配置(配置可选,自由设定)
    import {RFHttpConfig} from 'react-native-fast-app';
         
    RFHttpConfig().initHttpLogOn(true) // 是否打印Http请求日志
                  .initBaseUrl(ApiCredit.baseUrl) // 默认的BaseUrl
                  .initContentType(RFApiConst.CONTENT_TYPE_URLENCODED)
                  .initHeaderSetFunc((headers, request) => {
                     // 在这里设置公共header参数
                  })
                  .initParamSetFunc((params, request) => {
                     // 在这里设置公共params参数
                  })
                  .initParseDataFunc((result, request, callback) => {
                     let {success, json, response, message, status} = result;
                     // 指定当前app的特定数据解析方式
              });
    • 发送请求模板
       import {RFHttp} from 'react-native-fast-app';
         
       let url = 'v1/account/login/';
       let param = {phone: '18600000000', authCode: '123456'};
       let header = {Authorization: "Basic Y3Rlcm1pbmF......HcVp0WGtI"};
       let callback = () => (success, json, message, status) => {//请求结果回调
            if (success) {
               showToast(JSON.stringify(json))
            } else {
               showToast(msg)
            }
       };
         
       * 可设置的参数以builder形式拼接
       RFHttp().url(url)
           .param(param)
           .header(header)
           .internal()
           .rawData()
           .pureText()
           .encodeURI()
           .timeout(10000)
           .extra({tag: 'xx'})
           .contentType('text/xml')
           .resendRequest(data, callback) //重新请求(用于刷新accessToken后,重新发送已经失败的请求)
           .loadingFunc((loading)=> showLoading('请求中,请稍候...', loading))
           .[formJson|formData|formEncoded]()
           .[get|post|put|patch|delete|options](callback);
           
    • 发送请求
       import {RFHttp} from 'react-native-fast-app';
         
       const url = 'https://www.baidu.com';
           
       * 同步请求
       const response = await RFHttp().url(url).execute('GET');
       const {success, json, message, status} = response;
            
       if(success){
          this.setState({content: JSON.stringify(json)})
       } else {
          showToast(message)
       }
            
       * 异步请求
       RFHttp().url(url).get((success, json, message, status)=>{
           if (success){
              this.setState({content: JSON.stringify(json)});
           } else {
              showToast(msg);
           }
       });
                    
       * 异步请求
       RFHttp().url(url).execute('GET')
       .then(({success, json, message, status}) => {
           if (success) {
                this.setState({content: JSON.stringify(json)});
           } else {
                showToast(message);
           }
        })
        .catch(({message}) => {
            showToast(message);
        })
    • 灵活的基础控件
       RFImage
       RFText
       RFView
       RFlatList
            
       RFImage 非全路径在线图片则依赖图片资源BaseUrl的设置
            
       可在使用前如下配置:
            
       RFWidget
       .initResource(Assets)
       .initReferenceScreen(375, 677); // UI 整体尺寸缩放参考屏幕尺寸

详细使用方法请参考 示例