RN支持的样式

最新推荐文章于 2025-03-23 12:02:41 发布

SnowAnna

最新推荐文章于 2025-03-23 12:02:41 发布

阅读量1.2k

点赞数

分类专栏： React-Native

本文链接：https://blog.youkuaiyun.com/weixin_38289699/article/details/73276632

版权

React-Native 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了React-Native中样式的声明和使用，包括通过JavaScript对象创建样式，核心组件对样式的支持，以及如何处理样式冲突。此外，详细讲解了React-Native采用的Flexbox布局模型，解释了container和item的属性，如flexDirection、flexWrap、alignItems等，帮助开发者更好地理解和应用React-Native的布局机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

支持的样式:

Valid style props : [
    alignItems
    alignSelf,
    backfaceVisibility,
    backgroundColor,
    borderBottomColor,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderBottomWidth,
    borderColor,
    borderLeftColor,
    borderLeftWidth,
    borderRadius,
    borderRightColor,
    borderRightWidth,
    borderStyle,
    borderTopColor,
    borderTopLetRadius,
    borderTopRightRadius,
    borderTopWidth,
    borderWidth,
    bottom,
    color,
    flex
    flexDirection,
    flexWrap,
    fontFamily,
    fontSize,
    fontStyle,
    fontWeigt,
    height,
    justifyContent,
    left,
    letterSpacing,
    lineHeight,
    margin,
    marginBottom,
    marginHorizontal,
    marginLeft,
    marginRight,
    marginTop,
    marginVertical,
    opacity,
    overflow,
    padding,
    paddingBottom,
    paddingHorizontal,
    paddingLeft,
    paddingRight,
    paddingTop,
    paddingVertical,
    position,
    resizeMode,
    right,
    rotation,
    scaleX,
    scaleY,
    shadowColor,
    shadowOffset,
    shadowOpacity,
    shadowRadius,
    textAlign,
    textDecorationColor,
    textDecorationLine,
    textDecorationStyle,
    tintColor,
    top,
    transform,
    transformMatrix,
    translateX,
    translateY,
    width,
    writingDirection
]

React-Native 样式的使用。

React-Native 编写的应用的样式不是靠css来实现的，而是依赖javascript来为你的应用来添加样式，先不讨论这样做的好处与坏处，因为这个实现方法本身就存在着很多争议，我们主要关注他的样式的语法和特性。

1.声明样式:

var styles = StyleSheet.create({
    base: {
        width: 38,
        height: 38,
    },
    background: {
        backgroundColor: '#222222',
    },
    active: {
        borderWidth: 2,
        borderColor: ‘#ff00ff',
    },
});

从语法来看：调用了React-Native的一个构造方法，传入一个对象生成style，如果你写过React就应该很熟悉这种写法，和React的React.createCladd()语法是一样的，传入对象的key就相当于类名（我是这么理解），每个类也是一个对象，可以配置各种样式参数，总体来说和CSS的写法差不多，差别上把CSS的命名又“-”连字符改成驼峰写法，然后长度不用加单位“px”，字符串比如色值需要加引号写成字符串。其实也是和React的行内样式写法的语法一样。

2.样式的使用。

所有的核心组件都支持样式属性

<View style={style.base} />

当你需要设置多个属性类的时候，可以传入一个数组

<View style={[style.base,style.backgroundColor]} />

在两个样式又冲突的情况下，以右边的值优先，有些情况下可以加一些条件判断样式是否加载，比如，

<View style={[style.base,this.state.active&&style.active]} />

你也可以在组件中render样式，然而这种做法不推荐，其实就像一般html页面中行内样式不推荐一样，

<View
  style={[styles.base,{width:this.state.width, height:this.state.width*this.state.aspectRatio}]}
/>

3. 布局 – flexbox

React-Native 采用flexbox布局方式，flexbox是css3引入的布局模型－－弹性盒子模型，旨在通过弹性的方式对齐和分布容器中的item，使其适应不同的宽度和高度。

在 React-Native 中的flexbox 是css3中flexbox的一个子集，并不支持所有的flexbox属性。
flexbox 布局分为flexbox container 和 flexbox item ：如下图
RN_img_4.png
flexbox 是一个属性的集合，有些是属于container的有些是属于item的。
可以看下面这幅图：
RN_img_5.png
对于 container 有 main axis（主轴）和cross axis（交叉轴）。main size 和 cross size 分别是container主轴方向的交叉轴方向的宽度，main start 和 main end 分别是主轴的起始和结点，其他同理，container里面包含items。
下面介绍一下属性：

container的属性：

flexDirection:‘row‘|‘column‘

主轴的方向，水平 | 垂直，默认是 column ，item会按照主轴方向排列。

flexWrap:‘warp‘|‘nowrap’

flexbox 会默认将所有元素基于一行，这个属性表示是否折行。

alignItems:‘flex-start’|’flex-end’|’center’|‘stretch‘

表示item在 cross axis 上的对齐方式，基于cross axis的顶部｜基于cross axis的底部｜基于cross axis的中部｜布满整个。

justifyContent:‘flex-start’|‘flex-end‘|‘center‘|‘space-between‘|’space-around’

表示item在 main axis 上的对齐方式，基于主轴开始｜基于主轴结束｜居中｜左右两边对齐，item间隔相等｜每个item两端间隔相等。

item的属性

flex: num

item 所占的比例大小。

alignSelf:‘ flex-start ’ | ’ flex-end ’ | ’ center ’ | ‘ stretch ‘

它允许项目中当个item和其他itemsyou不一样的对齐方式，会覆盖alignitems的属性。