React Native 样式及其布局

React Native 样式及其布局

参考 https://reactnative.cn/docs/flexbox

一、样式

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';const App = () => {return (<View style={styles.container}><Text style={styles.red}> 红色的文字 </Text><Text style={styles.bigBlue}> 蓝色的文字 </Text><Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text><Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text></View>);
};const styles = StyleSheet.create({container: {marginTop: 50,},bigBlue: {color: 'blue',fontWeight: 'bold',fontSize: 30,},red: {color: 'red',},
});export default App;

一行一行来解释：

  • 第1行是需要导入React 包，是因为 react 在编译 jsx 后的需要使用 React.createElement

  • 第2行是需要导入StyleSheet、View、Text三个库

  • 第4~13行是App组件里的样式

  • 第15~27行是声明styles属性，方便App组件里使用这个属性里的子属性

  • 第29行就是导出App组件，方便index.js里渲染这个组件

    image-20231102160648668

最后效果如下图所示：

rn样式

二、高度与宽度

2.1 固定宽高

组件的高度和宽度决定了其在屏幕上显示的尺寸。

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

一种是这样写

import React from 'react';
import {View} from 'react-native';const FixedDimensionsBasics = () => {return (<View><View style={{width: 50, height: 50, backgroundColor: 'blue'}} /><View style={{width: 100, height: 100, backgroundColor: 'red'}} /><View style={{width: 200, height: 200, backgroundColor: 'yellow'}} /></View>);
};export default FixedDimensionsBasics;

一种是这样写

import React from 'react';
import {StyleSheet, View} from 'react-native';const FixedDimensionsBasics = () => {return (<><View style={styles.smallStyle} /><View style={styles.midStyle} /><View style={styles.bigStyle} /></>);
};const styles = StyleSheet.create({smallStyle: {width: 50,height: 50,backgroundColor: 'blue',},midStyle: {width: 100,height: 100,backgroundColor: 'red',},bigStyle: {width: 200,height: 200,backgroundColor: 'yellow',},
});export default FixedDimensionsBasics;

上面代码运行如下：

RN高度和宽度

个人更加推荐使用第二种写法，便于统一编写样式和查看样式。因为通常而言一个文件里会有很多种样式，如果都写在view组件的括号里，视觉效果看起来会很不友好，而且去排查样式问题的时候也不利于去排查到底是哪块的问题。

2.2 弹性（Flex）宽高

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

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

import React from 'react';
import {StyleSheet, View} from 'react-native';const FlexDimensionsBasics = () => {return (// 试试去掉父View中的`flex: 1`。// 则父View不再具有尺寸，因此子组件也无法再撑开。// 然后再用`height: 300`来代替父View的`flex: 1`试试看？ => 结果是三个view平分父view的300高度的<View style={styles.container}><View style={styles.powderblueStyle} /><View style={styles.skyblueStyle} /><View style={styles.steelblueStyle} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,},powderblueStyle: {flex: 1,backgroundColor: 'powderblue',},skyblueStyle: {flex: 2,backgroundColor: 'skyblue',},steelblueStyle: {flex: 3,backgroundColor: 'steelblue',},
});export default FlexDimensionsBasics;

上述代码效果图如下：

flex弹性宽高

如果上述代码的container下的样式flex不为1，设置的是height: 300的话，则效果如下所示：

剩余铺满

三、使用Flexbox布局

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值为column（而不是row），alignContent默认值为 flex-start（而不是 stretch）, flexShrink 默认值为0 （而不是1）, 而flex只能指定一个数字值。

3.1 Flex

flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。

在下面的例子中，在设置了flex: 1的容器 view 中，有红色，黄色和绿色三个子 view。红色 view 设置了flex: 1，黄色 view 设置了flex: 2，绿色 view 设置了flex: 3。1+2+3 = 6，这意味着红色 view 占据整个区域的1/6，黄色 view 占据整个区域的2/6，绿色 view 占据整个区域的3/6。

import React from "react";
import { StyleSheet, Text, View } from "react-native";const Flex = () => {return (<View style={[styles.container, {// Try setting `flexDirection` to `"row"`.flexDirection: "column"}]}><View style={{ flex: 1, backgroundColor: "red" }} /><View style={{ flex: 2, backgroundColor: "darkorange" }} /><View style={{ flex: 3, backgroundColor: "green" }} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,padding: 20,},
});export default Flex;

image-20231102165815456

如果将上述 flexDirection: “column” 改为 flexDirection: "row"的话，效果图如下：

横向布局

3.2 Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着**水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)**方向。

  • column（默认值）：将子元素从上到下对齐。如果启用换行，则下一行将从容器顶部的第一个项目右侧开始。
  • row：将子元素从左到右对齐。如果启用换行，则下一行将在容器左侧的第一个项目下方开始。
  • column-reverse：将子元素从底部向上对齐。如果启用换行，则下一行将从容器底部的第一个项目右侧开始。
  • row-reverse：将子元素从右到左对齐。如果启用换行，则下一行将在容器右侧的第一个项目下方开始。
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';const FlexDirectionBasics = () => {const [flexDirection, setFlexDirection] = useState('column');return (<PreviewLayoutlabel="flexDirection"values={['column', 'row', 'row-reverse', 'column-reverse']}selectedValue={flexDirection}setSelectedValue={setFlexDirection}><View style={[styles.box, {backgroundColor: 'powderblue'}]} /><View style={[styles.box, {backgroundColor: 'skyblue'}]} /><View style={[styles.box, {backgroundColor: 'steelblue'}]} /></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{padding: 10, flex: 1}}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map(value => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button, selectedValue === value && styles.selected]}><Textstyle={[styles.buttonLabel,selectedValue === value && styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={[styles.container, {[label]: selectedValue}]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: 'aliceblue',},box: {width: 50,height: 50,},row: {flexDirection: 'row',flexWrap: 'wrap',},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: 'oldlace',alignSelf: 'flex-start',marginHorizontal: '1%',marginBottom: 6,minWidth: '48%',textAlign: 'center',},selected: {backgroundColor: 'coral',borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: '500',color: 'coral',},selectedLabel: {color: 'white',},label: {textAlign: 'center',marginBottom: 10,fontSize: 24,},
});export default FlexDirectionBasics;

解析一下：

第5行：设置flexDirection这个属性默认值为column

第8行和第16行：调用PreviewLayout这个组件

第9~12行：分别给PreviewLayout传参

  • label=“flexDirection” 一个字符串
  • values={[‘column’, ‘row’, ‘row-reverse’, ‘column-reverse’]} 一个字符串数组
  • selectedValue={flexDirection} selectedValue属性值就是flexDirection变量的值
  • setSelectedValue={setflexDirection} setSelectedValue属性值调用setflexDirection方法，相当于会改变flexDirection的值

第13~15行：声明三个正方形的view，宽和高分别为50

第20~26行：声明PreviewLayout组件

第27和46行：声明整个父容器，距离边距是10，flex为1代表占据整个边距是10的容器

第28行：声明一个Text的组件，样式是styles.label，居中显示距离下面组件的间距是10，字体大小是24。文字内容是21行传参过来的label，也就是第九行的"flexDirection"

label: {textAlign: 'center',marginBottom: 10,fontSize: 24,
}

第29行和44行：声明要展示的第二部分view

第30行：对传下来的values数组，遍历里面的每个元素

第31行和第42行：声明一个TouchableOpacity系统组件

第32行：声明TouchableOpacity组件的key为values数组里每个元素的值

第33行：声明TouchableOpacity组件的按压下去触发的动作会调用setSelectedValue(value)方法，而setSelectedValue(value)实际上就是改变flexDirection这个变量的值

第34行：声明TouchableOpacity组件的style属性为styles.button的属性，以及如果selectedValue的值等于遍历当前values数组的值，那么就会再拼接上styles.selected属性的值，也就是下面两个css的值。（遍历到的那个组件的元素css样式是下面两个css样式组合起来的，否则就只是button一个css样式的）

button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: 'oldlace',alignSelf: 'flex-start',marginHorizontal: '1%',marginBottom: 6,minWidth: '48%',textAlign: 'center',
},
selected: {backgroundColor: 'coral',borderWidth: 0,
},

第35行和第41行：在TouchableOpacity组件里声明一个Text组件

第36~39行：如果被选中，声明Text的样式为下面两个css的样式；否则声明的Text样式为buttonLabel的css样式

buttonLabel: {fontSize: 12,fontWeight: '500',color: 'coral',
},
selectedLabel: {color: 'white',
}

第45行：声明在PreviewLayout组件里的子组件，也就是13到15行里的组件，对应的样式是container，其中每个组件里的flexDirection属性就是当前selectedValue的属性值

<View style={[styles.box, {backgroundColor: 'powderblue'}]} />
<View style={[styles.box, {backgroundColor: 'skyblue'}]} />
<View style={[styles.box, {backgroundColor: 'steelblue'}]} />

上述代码运行如下：

测试FlexDirection

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安全与HTTP协议：为何明文传输数据成为争议焦点？

安全与HTTP协议：为何明文传输数据成为争议焦点？

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、H…
阅读更多...
CentOS 搭建 Hadoop3 高可用集群

CentOS 搭建 Hadoop3 高可用集群

Hadoop FullyDistributed Mode 完全分布式 spark101spark102spark103192.168.171.101192.168.171.102192.168.171.103namenodenamenodejournalnodejournalnodejournalnodedatanodedatanodedatanodenodemanagernodemanagernodemanagerrecource managerrecource managerjob hist…
阅读更多...
2023.10.31 关于 Spring 的基本概念

2023.10.31 关于 Spring 的基本概念

目录 Spring 容器 对象生命周期 IoC Spring IoC DI Spring Spring 的全称为 Spring Framework&#xff0c;是一个开源的 Java 应用程序框架它提供了一种综合的编程和配置模型&#xff0c;用于构建现代化企业级的应用程序 一句话概括 Spring 是包含了众多工具方法的 IoC …
阅读更多...
docker进阶

docker进阶

文章目录 docker 进阶Part1 常用命令总结docker version 查看docker客户端和服务端信息docker info 查看更加详细信息docker images 列出所有镜像基本用法常用选项 docker search 搜索镜像基本用法示例用法 docker pull 拉取镜像基本用法示例用法 docker rmi 删除镜像基本用法示…
阅读更多...
FMC子卡解决方案：FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡

FMC子卡解决方案：FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡

FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡 一、板卡概述 　　基于FMC兼容1.8V IO的Full Camera Link 输出子卡支持Base、Middle、Full Camera link信号输出&#xff0c;兼容1.8V、2.5V、3.3V IO FPGA信号输出。适配xilinx不同型号开发板和公司内部各FMC载板。北…
阅读更多...
一个ppt带你读懂网络安全行业四大顶会之一的ndss论文＜＜Large Language Model guided Protocol Fuzzing＞＞

一个ppt带你读懂网络安全行业四大顶会之一的ndss论文＜＜Large Language Model guided Protocol Fuzzing＞＞

论文下载地址&#xff1a; Large Language Model guided Protocol Fuzzing
阅读更多...
Macroscope安全漏洞检测工具简介

Macroscope安全漏洞检测工具简介

学习目标&#xff1a; 本介绍旨在帮助感兴趣者尽快了解 Macroscope&#xff0c;这是一款用于安全测试自动化和漏洞管理的企业工具。 全覆盖应用程序安全测试&#xff1a; 如下图所示&#xff0c;如果使用多种互补工具&#xff08;SAST/DAST/SCA 等&#xff09;来检测应用程序…
阅读更多...
webgoat(A2) Broken Authentication

webgoat(A2) Broken Authentication

身份验证绕过 身份验证绕过以多种方式发生&#xff0c;但通常会利用配置或逻辑中的某些缺陷。篡改以达到正确的条件。 隐藏输入 最简单的形式是依赖于网页/DOM 中的隐藏输入。 删除参数 有时&#xff0c;如果攻击者不知道参数的正确值&#xff0c;他们可能会从提交中完全删…
阅读更多...
安企神局域网监控软件，员工电脑终端的安全管理软件

安企神局域网监控软件，员工电脑终端的安全管理软件

安企神局域网监控软件&#xff0c;员工电脑终端的安全管理软件 安企神局域网监控软件下载使用 公司老板其实最怕的就是公司机密遭到泄露&#xff0c;而一般泄露的方法都是通过一些通讯软件而泄露出去的&#xff0c;如微信、qq等等&#xff0c;所以很多老板都想知道有什么软件…
阅读更多...
idea 配置checkstyle全过程

idea 配置checkstyle全过程

checkstyle是提高代码质量,检查代码规范的很好用的一款工具&#xff0c;本文简单介绍一下集成的步骤&#xff0c;并提供一份完整的checkstyle的代码规范格式文件&#xff0c;以及常见的格式问题的解决方法。 一&#xff0c;安装 打开idea的文件选项&#xff0c;选择设置&…
阅读更多...
Intel oneAPI笔记（1）--oneAPI简介、SYCL编程简介

Intel oneAPI笔记（1）--oneAPI简介、SYCL编程简介

oneAPI简介 Intel oneAPI是Intel提供的统一编程模型和软件开发框架。 它旨在简化可充分利用英特尔各种硬件架构&#xff08;包括 CPU、GPU 和 FPGA&#xff09;的应用程序的开发 oneAPI一个重要的特性是开放性&#xff0c;支持多种类型的架构和不同的硬件供应商&#xff0c;是…
阅读更多...
记录一次时序数据库的实战测试

记录一次时序数据库的实战测试

0x1.前言 本文章仅用于信息安全防御技术分享&#xff0c;因用于其他用途而产生不良后果&#xff0c;作者不承担任何法律责任&#xff0c;请严格遵循中华人民共和国相关法律法规&#xff0c;禁止做一切违法犯罪行为。文中涉及漏洞均以提交至教育漏洞平台。 0x2.背景 在某次Edus…
阅读更多...
【Redis】Redis常用命令-getsetkeysexistsexpirettltype

【Redis】Redis常用命令-getsetkeysexistsexpirettltype

文章目录 读取文档注意事项set命令get命令全局/通用命令KEYSEXISTSDELEXPIRETTLTYPE 读取文档注意事项 官方文档链接&#xff1a;https://redis.io/ 注意&#xff1a;redis的命令不区分大小写 在redis文档给出的语法格式说明&#xff1a; []&#xff1a;相当于一个独立的单元&a…
阅读更多...
golang 发起 http 请求，获取访问域名的 ip 地址（net, httptrace）

golang 发起 http 请求，获取访问域名的 ip 地址（net, httptrace）

前言 今天碰到了个需求&#xff0c;我要知道程序对外访问的 http 请求域名的 ip 地址。 直接查看 golang 的 net/http 包&#xff0c;发现 Response 中并没有我想要的 ip 信息。 考虑到在 OSI 七层模型中&#xff0c;ip 是网络层协议&#xff0c;而 http 是应用层协议。去翻…
阅读更多...
计算机视觉的监督学习与无监督学习

计算机视觉的监督学习与无监督学习

什么是监督学习&#xff1f; 监督学习是一种机器学习算法&#xff0c;它从一组已标记的 合成数据生成器中生成的训练数据中学习。这意味着数据科学家已经用正确的标签&#xff08;例如&#xff0c;“猫”或“狗”&#xff09;标记了训练集中的每个数据点&#xff0c;以便算法可…
阅读更多...
设计模式总结

设计模式总结

1.将软件与设计模式比拟为城市与建筑模式&#xff0c;那么在面向对象的解决方案里&#xff0c;我们将对象和接口看成墙壁和门窗&#xff0c;模式的核心在于提供了相关问题的解决方案。 在软件设计中可能会遇到很多类似的问题&#xff0c;在每次遇到类似问题时我们不必全都新想…
阅读更多...
MYSQL 多表联查详解

MYSQL 多表联查详解

目录 一、一个案例引发的多表连接 二、笛卡尔积的错误和与正确的多表查询 2.1、笛卡尔积错误展示 2.2、笛卡尔积解决方法 2.3、练习 三、多表查询分类 3.1、等值连接 vs 非等值连接 3.2、自连接 vs 非自连接 3.3、内连接 vs 外连接 内连接&#xff08;inner join&…
阅读更多...
第2篇 机器学习基础 —（4）k-means聚类算法

第2篇 机器学习基础 —（4）k-means聚类算法

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。聚类算法是一种无监督学习方法&#xff0c;它将数据集中的对象分成若干个组或者簇&#xff0c;使得同一组内的对象相似度较高&#xff0c;不同组之间的对象相似度较低。聚类算法可以用于数据挖掘、图像分割、文本分类等领域…
阅读更多...
记录--这个前端Api管理方案会更好？

记录--这个前端Api管理方案会更好？

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 简介 大家好&#xff0c;前端小白一枚&#xff0c;目前接触后台管理系统比较多&#xff0c;经常遇到不同对象的增删改查的接口&#xff0c;如何对Api进行一个有比较好的管理是个问题。在学习偏函数的时…
阅读更多...
C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除

C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除

目录 一、添加数据 二、修改数据 三、删除数据 四、添加、修改和删除的源码 五、生成效果 1.VS和SSMS原始记录 2.删除ID2和5的记录 3.添加记录ID2、5和8 4.修改ID3和ID4的记录 用LINQtoSQL管理SQL Server数据库时&#xff0c;主要有添加、修改和删除3种操作。 项目中创…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023