×

ReactNative之解决主头文件问题

96
袁峥
2017.05.23 16:28* 字数 284

前言

眼看很多公司都开始尝试使用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);

日记本
Web note ad 1