duxui：基於Taro，兼容React Native、小程序、H5的多端UI庫詳情 - taro,react-native,小程序,android,ios ShaoGongBra 博客

duxui是duxapp官方開發的一款兼容多端的UI組件庫，兼容小程序、H5、React Native，庫中提供了60+的組件，覆蓋大部分使用場景

它能幫助你通過統一的組件樣式，快速完成多端應用的開發，包括React Native端的APP開發

duxui已經被我用於很多項目中，其中包含APP的項目就開發了幾十個了，你可以通過這個鏈接去查看或者體驗這些APP，https://app.share.dux.plus/，這裏只包含了其中一部分，其中一些APP可能因為停止運營，無法正常瀏覽

示例

如果你想看到這些組件的展示效果，請根據不同的端進行查看

小程序
APP https://app.share.dux.plus/cn.duxapp.duxui
H5 https://duxui.duxapp.cn

如果你想通過項目來查看這些組件的運行效果或者組件源碼，使用下面這個命令創建一個UI庫的示例代碼

npx duxapp-cli create projectName duxuiExample

其中的 projectName 是要創建的項目名稱，創建之後根命令行據提示進行下一步操作

使用

這是duxapp的一個模塊，需要在duxapp中使用才能使用這個模塊，UI庫的文檔請查看https://duxapp.cn/docs/duxui/start

如果你還沒有這個模塊，需要先安裝duxui模塊，如果你還不知道什麼是duxapp框架，請先查看這篇文章瞭解

yarn duxapp app add duxui

安裝之後在你的模塊中導入即可使用，像下面這樣

import { Column, Header, Image, px, Row, ScrollView, Tab, Text, TopView } from '@/duxui'
import { GridIcon } from '@/gridOperator'

export default function LedgerDetail() {
  return <TopView>
    <Header title='企業台賬詳情' />
    <ScrollView>
      <Row className='mt-3 mh-3 bg-white r-1 p-3 gap-3 items-start'>
        <Image style={{ width: px(80) }} square />
        <Column grow className='mt-1 gap-1'>
          <Text numberOfLines={1}>鄂爾多斯市九工建築有限責任公司</Text>
          <Text className='mt-1' size={18} color={2}>聯繫人：小阿呆 | 聯繫電話：010-4521-8652</Text>
          <Text size={18} color={2}>所屬網格片區：<Text type='primary'>輕紡織產業園</Text>    歷史問題：<Text type='danger'>12個</Text></Text>
        </Column>
        <GridIcon className='self-center text-primary' size={56} name='biaoqianlanbodianhua' />
      </Row>
      <Column className='mt-3'>
        <Tab>
          {
            tabs.map(item => <Tab.Item key={item.value} title={item.name} paneKey={item.value} />)
          }
        </Tab>
      </Column>
      <Column className='mt-3 mh-3 bg-white r-1 p-3'>
        <Text size={1} style={{ lineHeight: px(42) }}>公司是適應市場經濟社會化大生產的需要而形成的一種企業組織形式。中國的公司是指依照《中華人民共和國公司法》在中國境內設立的以營利為目的社團法人，包括有限責任公司和股份有限公司。 指企業的組織形式。以營利為目的的社團法人。在資本主義社會獲得高度發展。我國在建國後對私營公司進行了社會主義改造。國營工、商、建築、運輸等部門中實行獨立經濟核算的經營管理組織和某些城市中按行業劃分的專業管理機構，也通稱公司。隨着我國經濟體制的改革，享有法人資格的各種公司紛紛設立，按章程從事自身的生產經營活動。 指企業的組織形式。以營利為目的的社團法人。在資本主義社會獲得高度發展。我國在建國後對私營公司進行了社會主義改造。國營工、商、建築、運輸等部門中實行獨立經濟核算的經營管理組織和某些城市中按行業劃分的專業管理機構，也通稱公司。隨着我國經濟體制的改革，享有法人資格的各種公司紛紛設立，按章程從事自身的生產經營活動。 摺疊</Text>
      </Column>
    </ScrollView>
  </TopView>
}

const tabs = [
  { name: '基本信息', value: 0 },
  { name: '上報工單', value: 1 },
  { name: '歷史問題', value: 2 }
]

組件庫

下面我來介紹一下這些組件和組件的功能

TopView 頂層容器

TopView是作為頁面的根組件使用的，在duxapp中，每個頁面都需要存在這個組件，他用來實現duxapp的多項功能

Header 頭部導航

duxapp默認將頭部設置為了自定義，每個頁面面建議都使用一個頭部組件作為標題的顯示，且Header組件會控制狀態欄顏色顯示、H5頁面標題顯示

ScrollView 滾動容器

這是對Taro ScrollView的封裝，實現了多個端的下拉刷新功能，ScrollView僅支持垂直滾動，需要橫向滾動使用 ScrollView.Horizontal

PullView 彈窗

可以從上下左右4個方向彈出內容

Loading 加載動畫

用於展示loading動畫，類似於ios那樣的菊花

Absolute 絕對定位

放在這個組件內的子元素，會被渲染在最外層，這是用TopView.add方法實現的

List 分頁列表

當你的列表接口採用 page 進行分頁時，可以用這個組件快速實現列表頁面，這個組件有用以下特性

下拉刷新
自動分頁
空組件展示
自定義頭部底部渲染
RN端使用 @shopify/flash-list 實現，擁有更好的性能
多列支持

Layout 佈局計算

用來計算Layout所在的組件的位置、尺寸信息

ActionSheet 彈出菜單

封裝彈出菜單功能

Button 按鈕

按鈕組件

Cell 單元格

單元格組件用來展示豎向的菜單列表，默認擁有陰影屬性

LinearGradient 線性漸變

因為RN不支持通過css編寫漸變，所以寫了這個組件用於實現漸變功能

BoxShadow 陰影

由於RN 安卓端對陰影的支持不太完善，使用這個組件可以實現陰影效果

Column flex豎向

這是用於快速豎向佈局的組件

Row flex橫向

這是用於快速橫向佈局的組件

Space 間距

用於控制子元素的間距，通過 gap 實現，建議直接使用全局樣式的 gap

Divider 分割線

使用邊框實現的分割線

Grid 宮格

用於實現9宮格這樣的佈局方式

Card 卡片

卡片佈局，帶有外邊距，內邊距、圓角、陰影的組件

Tab 選項卡

選項卡切換，也可以用於表單項使用

TabBar 底部導航

通常用於app首頁的底部導航，要使用這個組件需要通過創建函數創建

Elevator 電梯樓層

例如城市選擇，可以通過城市名稱首字母進行導航，快速選擇到需要的城市，就可以用這個組件

Menu 下拉菜單

下拉菜單，常見用於一些表單的篩選

Form 表單

封裝了表單組件，能快速完成表單的佈局、表單驗證、複雜對象表單

表單包含了一系列的組件或者方法，包括下面這些

Form 表單
Form.Item 表單項
Form.Submit 表單提交
Form.Reset 表單重置
Form.Object 對象表單
Form.Array 數組表單
Form.ArrayAction 數組表單操作管理
Form.useFormContext 獲取表單上下文
Form.useFormItemProxy 給表單代理值和事件

Input 輸入框

對Taro Input的封裝，新增了一些屬性，基本不帶樣式，需要自行編寫樣式

Textarea 多行文本

對Taro Textarea的封裝，新增了一些屬性

Picker 選擇器

選擇器包含了單列選擇器和多列選擇器

PickerDate 日期選擇

用於日期時間的選擇

Radio 單選

單選組件

Checkbox 多選

多選組件

Switch 開關

開關組件

Calendar 日曆

為兼容多端，所以編寫的日曆組件，支持日、周、範圍選擇，支持多種自定義日曆的方式

Grade 評分

評分組件

Cascade 級聯選擇

一個功能豐富的級聯選擇器，支持單選、多選，支持多級選擇、單級選擇，等更多功能

CardSelect 卡片選擇

一個豐富樣式的卡片類型的選擇器，同時支持單選和多選模式

Upload 上傳

用於上傳圖片或者視頻的組件

ModalForm 彈出表單

用於將其他表單封裝為一個彈出表單，例如單列選擇器、日期選擇器都是由這個組件封裝的

這裏包含了

ModalForm 單出單個表單，作為一個表單使用，放在 Form.Item 中
ModalForms 彈出多個表單，獨立內容，放在Form內任何位置

NumberKeyboard 數字鍵盤

用於數字的輸入，例如輸入驗證碼，支付密碼、電話號碼、身份證等

InputCode 驗證碼密碼輸入

通常需要配合 NumberKeyboard 組件來實現驗證碼的輸入功能

LicensePlate 車牌號輸入

車牌號輸入組件

Text 文本

對Text的封裝，對主題色、字號等進行了主題配置，對常用css的快捷屬性封裝

Image 圖片

對圖片的封裝，實現了預覽，多圖預覽，在RN端使用 expo-image 實現，提供更好的性能

Badge 徽標

用於展示未讀消息數量，紅點

Tag 標籤

標籤展示

Avatar 頭像

顯示一個頭像或者頭像組

HtmlView 富文本顯示

用於顯示富文本

Step 步驟條

例如快遞更新日誌，就可以用這個組件來實現

Empty 空數據

某些列表數據為空時可以用這個組件顯示

Status 角標狀態

顯示在卡片四個角的狀態

LongPress 長按

長按事件封裝

TouchableOpacity 觸摸反饋

點擊具有不透明效果的組件

Modal 彈框

將內容彈出，顯示在屏幕中間

DropDown 下拉菜單

在元素做所在位置彈出一個菜單

loading 顯示加載動畫

顯示加載中動畫

message 消息通知

顯示一個消息通知

confirm 確認彈框

異步調用一個確認彈框

Sign 簽名

手寫簽名組件

HorseLanternLottery 跑馬燈抽獎

抽獎組件，可以隨機結果，也可以異步指定抽獎結果

總結

可以看到，組件庫很豐富，覆蓋的使用場景很多

詳細的使用方法，請前往開發文檔查看

開發文檔：http://duxapp.cn

GitHub：https://github.com/duxapp

博客 / 詳情