Skip to content
RNX 的前端拓展框架
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
plugins
.gitignore
CHANGELOG.md
README.md
index.js
package.json

README.md

RNPlus

npm npm

RNPlus 是 React Native 的前端拓展框架,简化并增强前端开发。

配合使用 rnxDemo,阅读该文档,风味更佳哦~

介绍

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

开始

// 引入 RNPlus
import {
    PView,
    PComponent,
} from 'rnplus';

// 定义一个页面
class PageA extends PView {
    // ...
};
// 定义一个组件
class MyComp extends PComponent {
    // ...
};

核心API

业务开发者 API

PView 和 PComponent

开发者可以通过 class Demo extends PView {}class Demo extends PComponent {} 的方式创建 RNPlus View 或 Component,并使用 RNPlus 的插件。

例:

class Demo extends PView {
    render() {
        return <Text>Hello, RNPlus!</Text>
    }
}

注意:

不要修改对 PViewPComponent 的引用。以下写法是无效的

// 无效的写法
const MyView = PView;

class Demo extends MyView {
    render() {
        return <Text>Hello, RNPlus!</Text>
    }
}

之所以这样是因为 RNPlus 为方便开发,会通过配套的 babel 插件自动完成注册。如果你一定要像上面那样,你也可以通过以下方式手动完成注册:

const MyView = PView;

class Demo extends MyView {
    render() {
        return <Text>Hello, RNPlus!</Text>
    }
}

// 手动注册
Demo = RNPlus.register(Demo, 'Demo');

RNPlus.defaults

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

默认配置:

RNPlus.defaults = {
    appName: '',
    globalPlugins: ['webx', 'router', 'redux'],
};

插件文档

暂见各自 README.md

插件开发者 API

RNPlus.addPlugin(name, adapter, ininFn, registerFn);

添加插件

  • name{String} 插件名
  • adapter: {Function} 适配器
  • ininFn: {Function} RNPlus 初始化回调函数
  • registerFn: {Function} PView/PComponent 注册时回调函数

示例

RNPlus.addPlugin('xxx', (Comp, opts, React, isView) => {
    // Comp : React Comp 组件实例
    // opts : 插件配置
    // React : React 对象
    // isView : 是否是 View (有可能是 Component)
}, (React) => {
    // React : React 对象
}, (RNPlusComp, isView) {
    // RNPlusComp : RNPlus Comp 组件 Class (PView/PComponent)
    // isView : 是否是 View (有可能是 Component)
});
You can’t perform that action at this time.