QRN Ext

QRN 的增强框架, 是 QRN 解决方案非常重要的组成部分。

全新的开发方式让页面的编写更加简单、效率。

介绍

  • Ext-Base: 核心、插件机制、Utils
  • Router: 路由部分，包括同 Context 内的路由，以及和 Native View 之间的跳转
  • Webx: 前端扩展部分，包括对 Style 的扩展和对事件的一些改动
  • redux：数据部分，与 Router 结合的单向数据流操作

开始

// 引入 ext
import '@qnpm/react-native-ext'

// 定义一个页面
class pageA extends QView {
    // ...
};
// 定义一个组件
class MyComp extends QComponent {
    // ...
};

**注意：**pageName 为 RN 应用指定打开 View 的名称。

核心API

业务开发者 API

class React.QView | class React.QComponent

QReact View/Component

开发者可以通过 class Demo extends QXXX {} 的方式创建 QReact View 或 Component，并使用 QReact 的插件特性。在你引用 Ext 进来的同时，会默认引入全局变量 QView 和 QComponent。

例：


class Demo extends QView {
    static plugins = ['redux'];
    render() {
        return <Text>Weact</Text>
    }
}

框架会针对所有继承 QView 的页面执行 AppRegistry.registerComponent(Demo, () => Demo)，业务无需再进行手动注册。

Ext.defaults

全局配置，用户可以配置一些全局的设置。

默认配置：

Ext.defaults = {
    globalPlugins: ['webx', 'router']
};

所有配置：

Ext.defaults = {
    // 配置业务 hybridId，在多业务跳转时会用到
    hybridId: 'hotel',
    // 配置首页（可以不配置，默认为 require 的第一个页面）
    indexView: 'base';
    // 配置全局导航栏
    navBar: {
        // 是否显示，默认为 false，不显示
        isShow: true,
        // 背景色，默认 Qunar 蓝
        backgroundColor: 'red',
        // 导航栏文字颜色，默认白色
        color: 'black',
        // 导航栏高度,默认44(不包括状态栏高度)
        height: 80,
        //左右按钮宽度,默认60
        buttonWidth:60,
        //状态栏背景色,默认透明
        statusBarBackgroundColor:'transparent',
        // 导航栏按钮点击不透明度，默认 0.6
        activeOpacity: 0.8,
        // 左侧按钮文字,默认'返回'
        leftButtonText: '<back'
    },
    // redux 配置项
    redux: {
        /**
        * 配置 createStore 的三个参数 reducer/initialState/enhancer
        */
        reducer,
        initialState,
        enhancer
        /**
        * 配置 middleware 中间件
        */
        middleware: []
    }
};

插件文档

插件开发者 API

React.Ext.addPlugin(name, adapter, ininFn, registerFn);

添加插件

  • name：{String} 插件名
  • adapter: {Function} 适配器
  • ininFn: {Function} QReact-Ext 初始化回调函数
  • registerFn: {Function} QView/QComponent 注册时回调函数

示例

React.Ext.addPlugin('xxx', (Comp, opts, React, isView) => {
    // Comp : React Comp 组件实例
    // opts : 插件配置
    // React : React 对象
    // isView : 是否是 View （有可能是 Component）
}, (React) => {
    // React : React 对象
}, (ExtComp, isView) {
    // ExtComp : QReact Comp 组件 Class (QView/QComponent)
    // isView : 是否是 View （有可能是 Component）
});

for Babel

babel-preset-qrn

作用：开发者定义 class XXX extends QView/QComponent 后，会自动将 Class，注册到 QReact-Ext 中。

请手动更改 node_modules/metro-bundler/rn-babelrc.json 为以下内容。

{
    "presets": ["qrn", "react-native"]
}
Router