ReactNative中样式与布局的书写

news2024/12/23 14:46:54

样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },  
  welcome: {
    fontSize: 20, 
    textAlign: 'center',
    margin: 10, 
  },  
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },  
});

使用-内联样式

注意

1.react-native的样式的属性名，需要使用驼峰方式。
2.react-native的样式应用于某一个组件上的话，该样式不会继承下去，而是只应用于设置该style的节点上（Text相关样式除外，Text嵌套的话，其文字属性也会应用于子元素）。
3.react-native的样式中width/height的单位是DP。并不是PX，这点请同学们注意一下。
4.应用于组件的style属性上的样式，可以不止一个，可以使用多个，以逗号分隔。如 style={styles.a,styles.b}

元素的宽度等于屏幕的宽度

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        width: Dimensions.get('window').width,
    },
});

react-native中所有能用到的属性

1 背景相关(background)
backfaceVisibility 改元素背面面向屏幕时是否可见
backgroundColor 元素的背景色

2 布局相关(flex)
alignItems flex布局元素中，子元素沿纵轴排列方式
alignSelf flex元素中，本项元素的纵轴对其方式
flex 这里指代flex-grow，描述了元素的宽度比例值
flexDirection 指代flex元素的排列方向
flexWrap 指代flex元素的换行方式，取值为 nowrap|wrap|wrap-reverse
justifyContent 指代flex元素在横轴上的排列方式，之后会进行详解。

3 布局相关(margin/padding/border)
margin 留白
marginBottom 底部留白
marginLeft 左外留白
marginRight 右外留白
marginTop 上外留白
marginVertical 上下外留白的简写，如果marginTop与marginBottom一样的话，可以直接用这个值代替
marginHorizontal 左右外留白的简写
borderColor 整体边框颜色
borderRadius 整体边框的圆角
borderWidth 整体边框的宽
borderStyle 边框样式 dotted solid double dashed等
borderBottomColor 底边框颜色
borderBottomWidth 底边框宽度
borderLeftColor 左边框颜色
borderLeftWidth 左边框宽度
borderRightColor 右边框颜色
borderRightWidth 右边框宽度
borderTopColor 上边框颜色
borderTopWidth 上边框宽度
borderBottomLeftRadius 左下角圆角边框
borderBottomRightRadius 右下角圆角边框
borderTopLeftRadius 上边框左圆角
borderTopRightRadius 上边框右圆角
padding 内留白
paddingBottom
paddingTop
paddingLeft
paddingRight
paddingHorizontal
paddingVertical
height 元素高度，包含padding与border
width 元素宽度，包含padding与border

4 定位相关
position
top
right
bottom
left

5 文字相关
color
fontFamily
fontSize
fontStyle
fontWeight
textAlign
textDecorationColor
textDecorationLine
textDecorationStyle
letterSpacing
lineHeight

6 阴影相关
shadowColor 阴影色IOS only
shadowOffset 阴影距离IOS only
shadowOpacity 阴影透明度IOS only
shadowRadius 阴影半径 IOS only
elevation 仰角 android only

7 其他
opacity
overflow
resizeMode
rotation
scaleX
scaleY
transform
transformMatrix
translateX
translateY
writingDirection

详解-示例

背景相关属性

backgroundColor 元素的背景色

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }   
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.colorBlock, styles.back1]}></View>
                <View style={[styles.colorBlock, styles.back2]}></View>
                <View style={[styles.colorBlock, styles.back3]}></View>
                <View style={[styles.colorBlock, styles.back4]}></View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
    colorBlock: {
        height: 100,
        width: 100,
    },  
    back1: {
        // 普通的16进制值
        backgroundColor: '#000'
    },  
    back2: {
        // 颜色名称的简写
        backgroundColor: 'blue'
    },  
    back3: {
        // 颜色的RGB表示
        backgroundColor: 'rgb(255, 0, 255)',
    },  
    back4: {
        // 颜色的RGBA表示
        backgroundColor: 'rgba(255, 0, 255, 0.5)',
    },
});

 backfaceVisibility 改元素背面面向屏幕时是否可见

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }   
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.rotateBlock, styles.back1]}>
                    <Text>Hello</Text>
                </View>
                <View style={[styles.rotateBlock, styles.back2]}>
                    <Text>Hello</Text>
                </View>
                <View style={[styles.rotateBlock, styles.back3]}>
                    <Text>Hello</Text>
                </View>
            </View>
        );  
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        marginTop: 50,
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },
    back1: {
        transform: [{rotateY: '135deg'}],
        backfaceVisibility: 'visible'
    },
    back2: {
        backfaceVisibility: 'hidden',
        transform: [{rotateY: '180deg'}],
    },
    back3: {
        backfaceVisibility: 'hidden',
        transform: [{rotateY: '360deg'}],
    },
});

 布局相关(margin/padding/border)

传统的网页设计的，使用css的盒子模型，来搭建元素的布局

一个元素由，内容、填充（内留白）、边框、边界（外留白）组成。对应上了我们这一组 布局相关的属性

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.rotateBlock, styles.back1]}>
                    <Text>Hello</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },
    back1: {
        
    },
});

 为其加上50的padding

 发现其宽高并没有变，表明我们这里的盒子模型其实有别与传统的盒子模型。它的宽高是包含了padding(内留白)在内的。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        height: 100,
        width: 100,
        padding: 30,
        borderWidth: 10,
        borderColor: '#000',
        backgroundColor: '#0f0',
    },
    back1: {
        
    },
});

 react-native的盒模型，可以认为是border-box的模型。即，width或者height的设定值，包含了padding、border和content。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        height: 100,
        width: 100,
        padding: 30,
        borderWidth: 10,
        borderColor: '#000',
        margin: 10,
        backgroundColor: '#0f0',
    },
    back1: {
        
    },
});

 看到margin并不会被算到width、height的值当中。而是产生了外部留白

特殊属性解释

这里请注意，marginvVerticl,marginHorizontal这两个属性是(marginTop,marginBottom)与(marginLeft,marginRight)的简写。
同理可证，paddingVertical,paddingHorizontal。这几个属性在css中没有，但是react提供了更为简洁的设置方法。
borderStyle，这个属性是设置border的展现样式的。其可取的值有：
'solid'(默认), 'dotted', 'dashed'，但是经过本人实验，在android环境下，几个属性貌似不能用

定位相关

一个元素如果不设定position去定位话，默认会形成文档流。每个元素会按顺序出现在文档流中，排到自己的位置上

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }   
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.rotateBlock, styles.back1]}>
                    <Text>Hello1</Text>
                </View>
                <View style={[styles.rotateBlock, styles.back2]}>
                    <Text>Hello2</Text>
                </View>
                <View style={[styles.rotateBlock, styles.back3]}>
                    <Text>Hello3</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },  
    back1: {
            
    },  
    back2: {
    },  
    back3: {
            
    },  
});

 将第二个view的定位设定为absolute(绝对定位)

第二个view不见了，那么它去哪儿了呢？它已经脱离了我们的文档流，留下1和3，还规规矩矩的排在那里。我们为了找到第二个view，目前到底在哪儿，来尝试着更改其top和left。top/right/bottom/left决定了定位元素的位置。我们先调整其left为20

back2: {
    position: 'absolute',
    backgroundColor: '#f00',
    left: 30,
},

 可见第二个元素虽然脱离了文档流但是还是在原先的位置上。只不过是被后面的第三个view给盖住了。这和我们在前端的常识不同。不过也可以理解为，此时的top与left。设定为了与自己未脱离文档流时候的top和left一致。

如果两个元素都设定为position:absolute,我们会看到排列顺序是按照文档流出现的顺序，下面的盖住上面的。但是如果我们像调整一下覆盖的顺序呢？我们在这里要介绍一下elevation，这个属性，这个属性比较奇特，他不仅可以控制覆盖顺序(就像z-index那样)，同时会产生一个阴影特效

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }   
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>Hello1</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back2]}>
                    <Text>Hello2</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },  
    shadowBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },  
    back1: {
        position: 'absolute',
    },  
    back2: {
        position: 'absolute',
    },  
});

 文档流中后出现的hello2覆盖掉了hello1。那么我们将两个元素都设置上elevation属性

back1: {
    position: 'absolute',
    elevation: 1,
},
back2: {
    position: 'absolute',
},

剧情发生了反转，有elevation的hello1，覆盖住了在文档流中后出现的hello2。其实hello2的elevation值，我们可以认为是0，

结论：当两个元素，显示上有重叠的时候，elevation大的元素，会覆盖掉elevation值较小的元素。

相应的例子代码，在本文例子中的index.android.js.elevation文件里

如果position设定为relative的话，会怎样呢

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },  
    rotateBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },  
    back1: {
            
    },  
    back2: {
        position: 'relative',
        backgroundColor: '#f00',
    },  
    back3: {
            
    },  
});

 并没有发生什么异样，文档流还是那个文档流，but,如果此时，我们设置了left: 20的话

back2: {
    position: 'relative',
    left: 20,
    backgroundColor: '#f00',
},

 第二个view并未脱离文档流，而是按照自己之前的位置，进行了偏移。

如上述所示，其实各位发现react的定位，并不复杂。另外，元素默认的position，是relative，所以其实上面的例子，我们不用指定position，也能得到同样的效果

back2: {
    left: 20,
    backgroundColor: '#f00',
},

阴影相关

阴影可以让我们的应用变得更加的立体，呈现出更好的展示效果

shadowColor

shadowOffset

shadowOpacity

shadowRadius

这些属性，目前只适用于IOS系统，android的话，有一个替代属性elevation，这个属性影响着元素的z-index，就是绝对定位时的覆盖顺序(上面我们提到过)，也会在元素上产生一个阴影。

class hellowReact extends Component {
    constructor(props) {
        super(props);
    }   
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>Hello1</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },  
    shadowBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },  
    back1: {
        elevation: 5,
    },  
});

可以利用这个属性来设定阴影，elevation的值会影响阴影的offset

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1395117.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

webpack面试题学习

webpack面试题学习

说说你对webpack的理解&#xff1f;解决了什么问题&#xff1f; 说说webpack的构建流程? 说说webpack中常见的Loader&#xff1f;解决了什么问题&#xff1f; 说说webpack中常见的Plugin&#xff1f;解决了什么问题&#xff1f; 说说Loader和Plugin的区别&#xff1f;编写Load…
阅读更多...
【Git】常用的Git操作集合

【Git】常用的Git操作集合

常用的Git操作集合 1. 分支操作1.1 查看本地所有分支git branch 1.2 查看所有分支&#xff08;包含本地远程仓库&#xff09;git branch -a 1.3 切换分支git checkout test 2. 常用基本操作2.1 查看 git 各存储区内(文件)状态git status 2.2 查看工作区与暂存区文件差异git dif…
阅读更多...
JVM 四种引用和使用场景

JVM 四种引用和使用场景

一、前言 在JDK 1.2之后&#xff0c;Java对引用的概念进行了扩充&#xff0c;将引用分为强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;、虚引用&#xff08;Phantom Referen…
阅读更多...
20240117在本地机器识别OCR法语电影的字幕效果PK

20240117在本地机器识别OCR法语电影的字幕效果PK

20240117在本地机器识别OCR法语电影的字幕效果PK 2024/1/17 11:18 1959 - Jirai Cracher Sur Vos Tombes [Gast, Vian].avi https://www.pianbar.net//drama/52892.html 1959[我唾弃你的坟墓]Jirai cracher sur vos tombes[BT下载/迅雷下载] magnet:?xturn:btih:7c9c99d9d048…
阅读更多...
HTML前端CSS实现只显示1行或者2行、3行剩余显示省略号

HTML前端CSS实现只显示1行或者2行、3行剩余显示省略号

想要做的效果: 文本只一行显示 /**实现思路&#xff1a;1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示“……”*/ {display: inline-block;white-space: nowrap; width: 100%; overflow: hidden;text-overflow:ellipsis; }文本只多行显示 /** 实现思路&…
阅读更多...
【Qt开发】初识Qt

【Qt开发】初识Qt

文章目录 1. Qt的背景1.1 Qt是什么1.2 Qt的发展史1.3 Qt支持的平台 2. Qt开发环境的搭建2.1 Qt SDK下载2.2 Qt SDK的安装 3. 一个简单的Qt模板程序的创建4. Qt模板程序的代码讲解4.1 main.cpp4.2 widget.h4.3 widget.cpp4.4 widget.ui4.5 test_1_18.pro4.6 一些中间文件 5. Qt在…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集3

【华为 ICT HCIA eNSP 习题汇总】——题目集3

1、&#xff08;多选&#xff09;IEEE 802.11n支持在哪些频率下工作&#xff1f; A、2.5GHz B、2.4GHz C、5GHz D、6GHz 考点&#xff1a;无线局域网 解析&#xff1a;&#xff08;BC&#xff09; IEEE 820.11n 支持双频段&#xff0c;它兼容IEEE 802.11a 与IEEE 820.11b 两种标…
阅读更多...
苹果笔记本 macbook 在 office word 中使用 mathtype 的方法

苹果笔记本 macbook 在 office word 中使用 mathtype 的方法

前言 想在 MacBook 中使用 mathtype&#xff0c;去搜索&#xff0c;去 Apple Store 下载也发现没有 解决方法 打开 office Word 的「插入」中的「获取加载项」、「我的加载项」。 在应用商店中下载&#xff0c;需要登录自己的微软账号。 加载成功后就可以使用了。 注意 和…
阅读更多...
微信小程序vue+uniapp瑜伽馆课程预约选课管理系统

微信小程序vue+uniapp瑜伽馆课程预约选课管理系统

本文对该站点以及对其进行了全面的剖析&#xff0c;为瑜伽馆管理系统的发展带来了借鉴。瑜伽馆管理系统小程序对于瑜伽馆起到了很好的引导作用&#xff0c;特别是对于地方瑜伽馆的处理起到了很大的作用。 按照已有的功能&#xff0c;除了管理员外&#xff0c;还可以对系统中的全…
阅读更多...
k8s的坑，从这里开始

k8s的坑，从这里开始

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 以前刚接触k8s时踩了不少坑&#xff0c;比如这些&#xff1a; 问题1 1、在master节点使用kubectl命令时&#xff0c;报错&…
阅读更多...
Linux快速部署文件服务器

Linux快速部署文件服务器

参考文档&#xff1a; Linux命令之nohup详解 - 掘金 【Linux】ps -ef|grep详解-CSDN博客 有个简单想法&#xff0c;我的一些文件放在机器某个目录下面&#xff0c;可以简单提供团队内部人员浏览和下载功能&#xff0c;节约时间&#xff0c;用最简单方法实现。 注&#xff1a;…
阅读更多...
3Dmax灯光学习（Vray灯光应用）

3Dmax灯光学习（Vray灯光应用）

渲染效果图可以用渲染100哦&#xff0c;最高支持max2024&#xff0c;cr11&#xff0c;vr6.2&#xff0c;支持LUT和Acescg工作流等常用插件&#xff0c;同时森林插件7.43也进行了支持&#xff0c;注册填邀请码【7788】即可免费测试&#xff01; 灯光应用 普通灯光/标准灯光(外景…
阅读更多...
PostgreSQL 中的 JSON：彻底改变数据库中的数据灵活性

PostgreSQL 中的 JSON：彻底改变数据库中的数据灵活性

在这篇文章中&#xff0c;我们将介绍 PostgreSQL 对 JSON 对象的实现和处理方法。拥有一些 Linux、Postgres 和 JSON 方面的经验是必要的&#xff0c;因为我们不仅要介绍这些新功能&#xff0c;还要介绍如何实现它们。 本文使用在 Ubuntu 23.04 上运行的 PostgreSQL 16&#x…
阅读更多...
springcloud Ribbon负载均衡服务调用

springcloud Ribbon负载均衡服务调用

文章目录 代码下载地址简介测试 Ribbon负载均衡算法手写RoundRobinRule源码8001/8002微服务改造80订单微服务改造测试 代码下载地址 地址:https://github.com/13thm/study_springcloud/tree/main/days6_Ribbon 简介 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端…
阅读更多...
eNSP学习——部分VLAN间互通、部分VLAN间隔离、VLAN内用户隔离（MUX-VLAN）

eNSP学习——部分VLAN间互通、部分VLAN间隔离、VLAN内用户隔离（MUX-VLAN）

MUX VLAN&#xff08;Multiplex VLAN&#xff09;提供了一种通过VLAN进行网络资源控制 的机制。通过MUX VLAN提供的二层流量隔离的机制可以实现企业内部员 工之间互相通信&#xff0c;而企业外来访客之间的互访是隔离的。 特点&#xff1a; 一、主VLAN端口可以和所有VLAN通信 二…
阅读更多...
云原生演进中的AI算力高效使用

云原生演进中的AI算力高效使用

0 1 云原生技术的普及与发展 云原生技术是一种基于容器技术的轻量级、高可用的应用架构&#xff0c;具有弹性扩展、快速部署、统一管理等特点。随着企业对敏捷开发和快速迭代的需求不断增加&#xff0c;云原生技术的普及与发展已成为不可逆转的趋势。 图1. 云原生技术发展之路…
阅读更多...
给Windows电脑设置一个还原点，电脑出错可快速恢复使用

给Windows电脑设置一个还原点，电脑出错可快速恢复使用

前言 离不开电脑的小伙伴们经常会有这种烦恼&#xff1a;Windows系统不知道什么时候会崩溃。 电脑一旦重装系统&#xff0c;就不是一件简单的事情。 其实重装系统并不麻烦&#xff0c;但麻烦的是需要把自己经常使用的电脑软件一并装上&#xff0c;这就是一件非常大的工程。电…
阅读更多...
adb 配对+无线连接

adb 配对+无线连接

配对 打开手机开发者选项-无线调试-使用配对码配对设备 出现ip端口和配对码后&#xff0c;电脑输入命令&#xff1a; adb pair ip:端口 eg:adb pair 192.168.137.244:39683 提示输入配对码&#xff1a;就按照手机上的输入。 此时配对成功 连接 再使用命令adb connect ip:port…
阅读更多...
Nginx深度解析

Nginx深度解析

Nginx是一个开源的高性能Web服务器&#xff0c;广泛用于提供HTTP服务。 它以其高效能、稳定性和低资源消耗而闻名。 Nginx的核心特性 异步非阻塞事件驱动架构&#xff1a;Nginx的主要优势之一是它的异步非阻塞处理方式&#xff0c;这使得它在处理大量并发连接时非常高效。轻量…
阅读更多...
flutter 环境搭建异常记录

flutter 环境搭建异常记录

flutter 环境搭建异常记录 1.执行flutter doctor自检报错 排查Android studio里配置的sdk是哪个 SDK Platforms选中 8.0 SDkTools也只勾选8.0 2.bash_profile 文件配置 没有的话 在根目录新建 export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023