react native 学习笔记之指定样式,宽,高

样式style没啥好说的,可以用{}扩起来指定样式,也可以用StyleSheet.create来集中定义组件的样式。

给控件指定宽高其实也没啥好说的,可以指定绝对值,比如:

<View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} />

也可以指定 弹性(Flex)宽高。

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)。

参考下面的例子:


View style={{flex: 1}}>
        <View style={{flex: 1,232)">'powderblue'}} />//整体权重是三个子控件flex数字之和,则表示占六分之一<View style={{flex: 2,232)">'skyblue'}} />//占六分之2<View style={{flex: 3,232)">'steelblue'}} />//占六分之3.占了屏幕的一半高度</View>

效果图:


关于flex的更多例子:可以参看我的下一篇文章react native 学习笔记----使用Flexbox布局

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...