duxui:基于Taro,兼容React Native、小程序、H5的多端UI库
· 阅读需 13 分钟
duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序、H5、React Native,库中提供了60+的组件,覆盖大部分使用场景
它能帮助你通过统一的组件样式,快速完成多端应用的开发,包括React Native端的APP开发
duxui已经被我用于很多 项目中,其中包含APP的项目就开发了几十个了,你可以通过这个链接去查看或者体验这些APP,https://app.share.dux.plus/,这里只包含了其中一部分,其中一些APP可能因为停止运营,无法正常浏览
示例
如果你想看到这些组件的展示效果,请根据不同的端进行查看
如果你想通过项目来查看这些组件的运行效果或者组件源码,使用下面这个命令创建一个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: '