自定义

自定义组件

如果 QRN-Web 所提供的组件还不能满足需求的话，可以自行开发组件，自行开发的组件可以使用所有 QRN-Web 已提供的组件或者 API，也可以不使用已提供的组件，自行从 Web 层面（HTML、CSS、JS）等实现。自行实现的组件不必拘泥于 React Native 的限制，就是一个普通的 React Web 组件。开发组件很简单，只需要在根目录下的任何文件夹内（除了 node_modules/），建立组件，并在组件头部的注释中添加：

/*
 * @providesWebModule CustomComponent
 */
const React = require('react');
module.exports = class CustomComponent extends React.Component {
  render() {
    return <div>Hello, world.</div>;
  }
}

如果使用 @providesModule 可能会和 QRN 的打包工具发生冲突，所以采用 @providesWebModule 作为 QRN-Web 的自定义组件标识符。

QRN-Web 在启动开发服务器或者打包的时候会扫描项目目录下（除了 node_modules/）所有带有 @providesWebModule 的文件，并记录下来，在代码中可以直接引用：

import CustomComponent from 'CustomComponent';

注意⚠️：自定义组件无法从 react-native 或者 qunar-react-native 中引用，因为 QRN-Web 没有将其写入到 react-native 或者 qunar-react-native 中。

自定义 NativeModules

有时候 QRN 提供的 NativeModules 还无法满足业务需求，业务线需要自定义 NativeModules，QRN-Web 也可以使用自定义 NativeModules 来扩展 QRN-Web 的 NativeModules。

自定义 NativeModules 很简单，只需要在项目目录下的除 node_modules 以外的目录中创建包含 @providesWebNativeModule [custom_module_name] 的文件即可。该文件导出的对象会被作为 NativeModules 的属性 module_name 的值。支持 commonJS 以及 ESModules。

比如以下代码会在 NativeModules 增加一个 key 为 foo，值为 { bar: () => {}} 的对象：

/**
 * @providesWebNativeModule foo
 */
module.exports = {
    bar: () => {}
};

也可以使用 ES Module：

/**
 * @providesWebNativeModule foo
 */
export const foo = () => {};