如何定义样式,是使用一个UI组件的关键。UILib内置了多种全局样式的配置方式,包括Colors, Typography, Shadows, Border Radius等。
下面的例子中,我们通过接口
Colors.loadColors()定义两种全局的颜色:pink和gold。
通过接口
Typography.loadTypographies()定义两种全局的文字样式:h1和h2。
import {Typography, Colors} from 'react-native-ui-lib'; Colors.loadColors({ pink: '#FF69B4', gold: '#FFD700', }); Typography.loadTypographies({ h1: {fontSize: 58, fontWeight: '300', lineHeight: 80}, h2: {fontSize: 46, fontWeight: '300', lineHeight: 64}, });然后我们就可以在项目的任何地方,非常方便的使用颜色和文字样式了。比如要设置Text的文字样式为h1,颜色为pink,只需要这样写:
<Text h1 pink>Hello World</Text>最终的效果是这样的
对我来说,Colors和Typography已经够用了。如果你们想了解更多的全局设置接口,可以查看他们的源码,是的。。。只能看源码了,因为文档并不全面,扎心了老铁。。 T.T
快速对齐
使用UILib提供的几个属性,可以快速的实现内容的对齐。比如下面的代码,使用了View的left、right、top、bottom、center属性。非常方便的设置了内容(这里的Button)的布局。
<View left> <Button label="Button"> </View> <View right> <Button label="Button"> </View> <View top> <Button label="Button"> </View> <View bottom> <Button label="Button"> </View> <View center> <Button label="Button"> </View>最终的效果长这样
颜色
在上面,我们提到了使用Colors.loadColors()来统一配置颜色。如果我们要设置文字的颜色,可以这样:
<Text pink>...</Text>如果我们希望把View的背景也设置成pink的话,我们可以这样:
<View bg-pink>...</View>我们并不需要额外在Colors.loadColors()中设置bg-pink这个key。只需要在我们定义的key前面,加上bg-或者background-就可以了。
flex
如果我们要设置View的flex,我们可以直接这样:
<View flex> <!--在这里,flex默认为1--> <View flex-2/> <View flex-3/> <View flex-4/> </View>padding/margin
UILib同样提供了快速设置padding和margin的方法:
padding-[value], paddingL-[value], paddingT-[value], paddingR-[value], paddingB-[value], paddingH-[value], paddingV-[value]比如,我们想设置View的paddingVertical为20,只需要设置View的属性paddingV,后面加上横杠,然后是具体的数值:
<View paddingV-20>...</View>如果同时要设置paddingHorizontal为30,只需要这样:
<View paddingV-20 paddingH-30>...</View>margin的使用方式和padding一样:
margin-[value], marginL-[value], marginT-[value], marginR-[value], marginB-[value], marginH-[value], marginV-[value]如果要设置View的marginTop为5,marginBottom为10,只需要这样:
<View marginT-5 marginB-10>...</View>更多的相关接口,可以查看官方接口文档
图片资源的统一管理
图片资源是UI代码里很重要的一个组成部分。包括图标、占位图等。我们在项目的非常多地方,都会使用到资源。UILib提供了一套统一的管理方式,方便我们使用图片资源。
我们可以在App启动时,加载需要用到的图片资源
import {Assets, Image} from 'react-native-ui-lib'; Assets.loadAssetsGroup('icons', { icon1: require('icon1.png'), icon2: require('icon2.png'), icon3: require('icon3.png'), });然后在使用Image组件时,通过assetName设置图片
<Image assetName="icon1"/> // 默认情况下,assetGroup属性是"icons"我们也可以配置自己的AssetsGroup
Assets.loadAssetsGroup('illustrations.placeholders', { emptyCart: require('emptyCart.png'), emptyProduct: require('emptyProduct.png'), }); Assets.loadAssetsGroup('illustrations.emptyStates.', { noMessages: require('noMessages.png'), noContacts: require('noContacts.png'), });然后,在使用Image组件时,通过设置assetGroup,来使用我们自己的AssetsGroup
<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>同样,我们也可以使用Image原来的风格,设置Image的source
<Image source={Assets.icons.icon1}/>丰富的控件
UILib提供了丰富的控件,具体可以查看官方接口文档
Action Bar
Action Sheet (cross-platform)
Avatar
Badge
Basic List
Button
Card
Connection Status Bar
List Item
State Screen
Loader Screen
Page Control
Picker
Stepper
Text
TextInput
MaskedInput
TagsInput
不过我目前主要使用的是他们的View、Text、Button等基础的几个组件。
注意事项
Text组件支持margin,但不支持padding
比如这样设置,是无效的
<Text padding-10">...</Text>我猜想他们这样设计的目的,是认为Text作为文字展示的内容组件(content component),设置padding是不合理的。padding的配置交给容器组件(container component),比如View,可能会更合理。
TouchableOpaciply不支持margin、padding等布局属性
这个设定刚开始我不太习惯,一度以为是UILib的bug,后来查了下,他们的TouchableOpaciply就是没有提供这些属性。我猜想wix团队是希望把布局的代码集中在View上。TouchableOpaciply专注于实现点击这个功能。
使用习惯
theme
我喜欢在项目中创建一个叫theme.js的文件,里面配置项目中需要用到的颜色和字体
import {Typography, Colors} from 'react-native-ui-lib' Colors.loadColors({ primary: '#4C6FB0', secondary: '#7DC8FF', border: '#bbbbbb', line: '#c5c5c5', paper: '#f3f3f3', highlighted: '#f9f9f9', lightGray: '#bbbbbb', gray: '#888888', darkGray: '#444444', green: '#176500', red: '#FF0032', blue: '#02008E', yellow: '#FFB400', white: '#FFFFFF', black: '#000000', transparent: 'transparent', defaultText: '#666666', lightText: '#aeaeae', darkText: '#444444', }) Typography.loadTypographies({ h1: {fontSize: 18, fontWeight: 'bold', color: Colors.darkText}, h2: {fontSize: 16, color: Colors.darkText}, h3: {fontSize: 15, color: Colors.darkText}, h4: {fontSize: 14, color: Colors.defaultText}, h5: {fontSize: 12, color: Colors.lightText}, })然后在App的入口,导入这个文件
import theme from './App/theme'这样,App启动的时候,就可以加载我所需要的样式配置。
适量的使用UILib提供的布局属性
正所谓物极必反。UILib虽然提供了便捷的布局方式,但是如果在项目中过量的使用,反而会适得其反。比如下面两种风格的代码
第一种
<View bg-primary paddingLeft-5 paddingTop-8 paddingRight-10 paddingB-20 row centerV> <Image style={styles.avatar} source={require('../../img/mine/avatar.png')} /> </View>第二种
<View style={styles.container}> <Image style={styles.avatar} source={require('../../img/mine/avatar.png')} /> </View>当一个View的布局比较复杂的时候,我推荐使用第二种方式。因为如果一个组件结构比较复杂,如果全部通过第一种方式,那么以后阅读代码的时候,大量的布局代码势必会造成干扰。
如果一个View、Text只需要设置一、两个布局样式,我推荐使用第一种设置方式。如果超过了三种,则推荐使用第二种方式。
原文链接:https://www.jianshu.com/p/c2771ff962a4