[RN] React Native style -- 款式的运用

2024年5月7日 218次阅读 来源: 阿城

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的属性。

能够看我的个人blog的文章 阿城｜blog

    原文作者：阿城
    原文地址: https://segmentfault.com/a/1190000004031633
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞