ReactNative之解决主头文件问题

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之解决主头文件问题

RN没有头文件

• 在RN开发中，可能经常需要封装一个模块，这个模块中有很多组件，有可能在使用一个组件的时候，需要依赖其他组件，这样就会导致使用这个模块一个组件，就常常需要把所有模块的组件导入。
• 在iOS中，有主头文件，搞个公用的头文件，导入这个公用的头文件就好了，那么同理RN也可以，关键点，RN没有头文件这个说话

RN如何实现头文件

• 可以先搞个公用的js文件，在这里导入所有组件，在暴露出去

/*
*
* @providesModule CommonGroupListViewHeader
*
* **/

import CommonGroupListView from '../CommonGroupListView/CommonGroupListView'

import CommonGroupItem from '../CommonGroupListView/CommonGroupItem'

import CommonArrowItem from '../CommonGroupListView/CommonArrowItem'

import CommonSwitchItem from '../CommonGroupListView/CommonSwitchItem'

// 这句话的意思：把当前文件作为一个模块导出，模块里面有这些子组件
// 以后导入这个模块的时候，就能获取了这个模块里面的东西.
module.exports = {
    CommonGroupListView,
    CommonGroupItem,
    CommonArrowItem,
    CommonSwitchItem
};

• 如何使用主头文件
  • 以后就导入CommonGroupListViewHeader这个文件就好了

import CommonGroupListViewHeader from 'CommonGroupListViewHeader'

// 创建行模型
var item0 = new CommonGroupListViewHeader.CommonSwitchItem('','消息推送','');
var item1 = new CommonGroupListViewHeader.CommonSwitchItem('','图书借阅','');
var item2 = new CommonGroupListViewHeader.CommonArrowItem('','解绑设备','');

// 创建第0组
var group = new CommonGroupListViewHeader.CommonGroupItem([item0,item1,item2],10);

groups.push(group);