fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Shoutem UI
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/shoutem/ui
网站描述:React Native应用的可定制组件集

Shoutem UI是一个全面的UI库,提供了各种各样的UI组件和设计模式,包括按钮、卡片、表单、图标等。该库提供了多种主题样式,可以轻松地将应用程序的外观与不同风格的设计保持一致。

Shoutem UI还具有出色的可定制性,可以根据开发人员的需求进行修改。此外,Shoutem UI还提供了与其他UI库的兼容性。


安装

npm install --save @shoutem/theme


例子

使用Shoutem UI(一组可根据主题自定义的组件)来查看如何使用它。

创建新的react Native项目:

react-native init HelloWorld

安装@shoutem/ui和@shoutem/theme,并将它们链接到项目中:

cd HelloWorld
npm install --save @shoutem/ui
npm install --save @shoutem/theme
rnpm link

现在,只需将以下内容复制到React Native项目的App.js文件中:

import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { StyleProvider } from '@shoutem/theme';
import { Card,Image,View,Subtitle,Caption} from '@shoutem/ui';
const window = Dimensions.get('window');
const Colors = {
BACKGROUND: '#ffffff',
SHADOW: '#000000',
};
const MEDIUM_GUTTER = 15;
const theme = {
'shoutem.ui.View': {
'.h-center': {
alignItems: 'center',
},
'.v-center': {
justifyContent: 'center',
},
'.flexible': {
flex: 1,
},
flexDirection: 'column',
},
'shoutem.ui.Card': {
'shoutem.ui.View.content': {
'shoutem.ui.Subtitle': {
marginBottom: MEDIUM_GUTTER,
},
flex: 1,
alignSelf: 'stretch',
padding: 10,
},
width: (180 / 375) * window.width,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
backgroundColor: Colors.BACKGROUND,
borderRadius: 2,
shadowColor: Colors.SHADOW,
shadowOpacity: 0.1,
shadowOffset: { width: 1, height: 1 },
},
'shoutem.ui.Image': {
'.medium-wide': {
width: (180 / 375) * window.width,
height: 85,
},
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Colors.BACKGROUND,
},
};

export default class App extends Component<{}> {
render() {
return (
<StyleProvider style={theme}>
<View styleName="flexible vertical v-center h-center">
<Card>
<Image
styleName="medium-wide"
source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-12.png' }}
/>
<View styleName="content">
<Subtitle numberOfLines={4}>
Lady Gaga Sings National Anthem at Super Bowl 50
</Subtitle>
<Caption>21 hours ago</Caption>
</View>
</Card>
</View>
</StyleProvider>
);
}
}

最后,运行应用程序!

react-native run-ios


链接: https://fly63.com/nav/3965

more>>
相关栏目
Materialize
基于Material Design的现代响应式前端框架
官网GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网GitHub
Vue-Access-Control
Vue权限管理解决方案
官网GitHub
RmlUI
桌面端GUI开发框架
官网GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入GitHub
vue-multiselect
Vue.js 打造的下拉组件
官网GitHub
Structor
先进的React GUI编辑器
点击进入GitHub
lulu ui
基于jQuery,针对PC网站,兼容IE7+的前端UI框架
官网GitHub
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言
官网GitHub
vue-design-system
一个用于基于 Vue.js 构建 UI 设计系统的开源工具
官网GitHub
Tauri
使用Web前端构建更小,更快,更安全的桌面应用
官网GitHub
Element Plus
基于 Vue 3,面向设计师和开发者的组件库
官网GitHub
vue-blu
基于Vuejs和Bulma开发的开源UI组件库
官网GitHub

手机预览