@xiaoyu-design/rn-library

react-native 相关的一些封装组件

安装

npm install @xiaoyu-design/rn-library

yarn add @xiaoyu-design/rn-library

Usage

日志面板使用

  // 外层直接用这个初始化, 不用放到函数作用域
  import { setupDebugConsole } from "@xiaoyu-design/rn-library"
  const DebugConsole = setupDebugConsole();


  // 在你的根组件里面使用
  render() {
      return (
        {isTest && <DebugConsole />}
    )
  }

UI弹窗作用域控制器使用

一般用于在界面中的弹窗弹出，支持在任意作用域下弹窗

// 引入
import { UIModal, UIProviderContext, UIProviderWidget, UIModalBody } from '@xiaoyu-design/rn-library';

// UIProviderContext 确认弹窗渲染的区域，name是唯一的，但是 多个widget可以指定同一个组件，后者居上显示
// UIProviderWidget 包裹你的弹出内容组件，name是唯一的
// UIModal 就是一个modal，可以用其他组件代替，这里只是示例

// .... 省略其他代码
<UIProviderContext name={"MODAL_PAGE_VIEW"}>
  <UIProviderWidget  provider={"MODAL_PAGE_VIEW"} name={"MODAL_PAGE_VIEW_modal_demo"}>
    <UIModal
      visible={modalAction.show}
      onClose={modalAction.onClose}
      modalDirection={"bottom"}
      maskClosable
      title={"这是标题"}
      closable
    >
      <UIModalBody>
        <View style={styles.modalContent}>
          <Text>内容....</Text>
        </View>
      </UIModalBody>
    </UIModal>
  </UIProviderWidget>
</UIProviderContext>

下拉菜单组件

一般用于按钮点击，在按钮下面位置显示一个下拉菜单

import { UIDropdownMenuTarget } from '@xiaoyu-design/rn-library';

// .... 省略其他代码
 <UIDropdownMenuTarget
   visible={isDropdownVisible} // 是否显示
   onClose={handleCloseDropdown} // 关闭事件
   buttonRef={buttonRef} // 你的按钮的ref
   maskClose={false}
 >
   // 你的下拉菜单内容
 </UIDropdownMenuTarget>

tab组件

支持横向溢出可滚动，切支持 角标

  import { UIScrollTab } from '@xiaoyu-design/rn-library';

   // 示例：
    <UIScrollTab
      value={value}
      data={data}
      onChange={onChange}
      renderItemText={(e: IScrollTabRenderProps)=> {
        return e.item.label
      }}
    />

动画组件

渐入渐出 - UIFadeView

import { UIFadeView } from '@xiaoyu-design/rn-library';


// ...省略
// visible 是否显示，用来控制渐入渐出
// duration 动画过渡时间
<UIFadeView
  visible={visible}
  duration={300}
>
</UIFadeView>

Hook相关

UIHook

import { UIHook } from '@xiaoyu-design/rn-library';

// ... 省略

const appPopupAction = UIHook.usePopupAction({
  defaultShow: false
});

// appPopupAction.show // 值
// appPopupAction.onClose // 关闭
// appPopupAction.onOpen // 打开
// appPopupAction.onToggle // 取反

Sub-packages

This library also includes sub-packages for specific functionality:

• @xiaoyu-design/rn-update: Update module for React Native applications

Installation of Sub-packages

yarn add @xiaoyu-design/rn-update
# or
npm install @xiaoyu-design/rn-update

Creating New Sub-packages

You can create new sub-packages using the provided script:

node scripts/create-update-package.js <package-name> [package-description]
# Example:
yarn create-subpackage rn-new-feature "New feature module"