React-native之Flexbox

本文总结:

我们学到了 React Native 的 Flexbox 布局，它让写样式变得更方便啦！😊 Flexbox 就像一个有弹性的盒子，有主轴和交叉轴（行或列）。

在 RN 里写样式要用 StyleSheet.create 对象，属性名是驼峰命名。

文章还介绍了如何用 Platform.select 给不同平台写样式，以及使用 styled-components 这个库的简单例子（虽然我们主要还是用 StyleSheet）。

文章还通过三栏布局和横向布局的例子，展示了 flexDirection, alignItems, justifyContent 和 alignSelf 这些属性的用法。

特别喜欢 alignSelf: 'stretch' 能让元素填充空间的技巧！👍

最后，通过抽象出 Row 和 Col 组件，我看到了如何用 Flexbox 实现更复杂的嵌套布局。感觉 Flexbox 真的让布局变得灵活多了！🚀

1、关于Flexbox

在将flexbox引入css前，构建布局的各种css属性都比较粗糙，而且很容易出错。而flexbox通过抽象了很多属性来解决问题。字如其名flexbox的意思就是一个具有弹性的盒子模型。我们画个图：假设你有一个容器和它的子元素，它看起来可以是这样的。

Flexbox容器有二个轴，即列（向上/向下）或行（左/右）。

2、实操

我们直接上代码吧,这是一个js模块，而不是css模块。如果我们要声明rn的样式，我们需要去定义一个对象然后调用StyleSheet.create()最后抛出它在你的模块中。但是我们需要注意的是rn只支持驼峰命名。

import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'ghostwhite',...Platform.select({ios: { paddingTop: 20 },android: { paddingTop: StatusBar.currentHeight },}),},box: {width: 100,height: 100,justifyContent: 'center',alignItems: 'center',backgroundColor: 'lightgray',},boxText: {color: 'darkslategray',fontWeight: 'bold',},
})

然后我们看到刚才我写了这样一段代码,这里其实就是根据你的移动端去选择样式。

...Platform.select({ios: { paddingTop: 20 },android: { paddingTop: StatusBar.currentHeight },
}),

ok，我们看一下在rn组件中如何使用

import { Text, View } from 'react-native'
import styles from './styles'
export default function App() {return (<View style={styles.container}><View style={styles.box}><Text style={styles.boxText}>I'm in a box</Text></View></View>)
}

这些样式将通过样式属性分配给每个组件。我们来看看它的表现。

3、Styled-components样式组件库使用

Styled-components是一个css-in-js的库为我们的组件去提供样式，如我们去直接看看怎么使用吧。当然只是介绍一下，我们还是使用styleSheet。

首先下载依赖


yarn add styled-components

然后我们写点代码

import styled from "styled-components/native";
const Box = styled.View'width: 100px;height: 100px;justify-content: center;align-items: center;background-color: lightgray;
';
const BoxText = styled.Text'color: darkslategray;font-weight: bold;
';

使用

const App = () => {
return (<Box><BoxText>I'm in a box</BoxText></Box>
);};

4、基础Flexbox

接下来主要讲一下rn中的几种常见布局和flexbox的实战

4.1、三栏布局

普通的从上到下的三栏布局。

你可以把view理解成div,text理解成p。

import { Text, View } from 'react-native'
import styles from './styles'
export default function App() {return (<View style={styles.container}><View style={styles.box}><Text style={styles.boxText}>#1</Text></View><View style={styles.box}><Text style={styles.boxText}>#2</Text></View><View style={styles.box}><Text style={styles.boxText}>#3</Text></View></View>)
}

flexDirection属性是决定了主轴的方向，上到下或者左到右，而alignItem和justifyContent属性决定了元素的排列和间隔。


import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({container: {flex: 1,flexDirection: 'column',alignItems: 'center',justifyContent: 'space-around',backgroundColor: 'ghostwhite',...Platform.select({ios: { paddingTop: 20 },android: { paddingTop: StatusBar.currentHeight },}),},box: {width: 300,height: 100,justifyContent: 'center',alignItems: 'center',backgroundColor: 'lightgray',borderWidth: 1,borderStyle: 'dashed',borderColor: 'darkslategray',},boxText: {color: 'darkslategray',fontWeight: 'bold',},
})

而如果我们想让它左右两边填满那？就像这样

我们可以加入alignSelf这个属性，这个属性的意思是根据主轴flexDirection的方向，改变宽度或者高度（column改变的就是宽度，row改变的就是高度）去填充空白，动态计算高度或宽度。像这样就是会填满你屏幕的宽度。

  box: {height: 100,justifyContent: 'center',// alignSelf: 'stretch',alignItems: 'center',backgroundColor: 'lightgray',borderWidth: 1,borderStyle: 'dashed',borderColor: 'darkslategray',},

当我们把手机横过去

我们稍微优化一下，正好也写一下横向的布局，上面的样式太`抽象`了写得。

 


import { Text, View, StatusBar } from 'react-native'
import styles from './styles'
import Box from './Box'
export default function App() {return (<View style={styles.container}><Box>#1</Box><Box>#2</Box></View>)
}
 


import { PropTypes } from 'prop-types'
import { View, Text } from 'react-native'
import styles from './styles'
export default function Box({ children }) {return (<View style={styles.box}><Text style={styles.boxText}>{children}</Text></View>)
}
Box.propTypes = {children: PropTypes.node.isRequired,
}
 

这个就是会拉伸至整个屏幕高度的横向布局
 

 


import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({container: {flex: 1,flexDirection: 'row',backgroundColor: 'ghostwhite',alignItems: 'center',justifyContent: 'space-around',...Platform.select({ios: { paddingTop: 20 },android: { paddingTop: StatusBar.currentHeight },}),},box: {width: 100,justifyContent: 'center',alignSelf: 'stretch',alignItems: 'center',backgroundColor: 'lightgray',borderWidth: 1,borderStyle: 'dashed',borderColor: 'darkslategray',},boxText: {color: 'darkslategray',fontWeight: 'bold',},
})
 

 

我们来看看它的表现
 

 

当我们把手机横过去
 

 

 

 

5、稍微复杂一点的flexBox
 

 

假设我们要实现这样一个效果,我们该如何实现？
 

 

 

 

在我们的意识中，整个布局有行、列。那我们同样也可以抽象出col、row组件分别代表行列。我们直接上代码吧。
 

可以看到我们分别确定了col、row的方向和排列。
 

import { Platform, StyleSheet, StatusBar } from 'react-native'export default StyleSheet.create({container: {flex: 1,flexDirection: 'column',backgroundColor: 'ghostwhite',alignItems: 'center',justifyContent: 'space-around',...Platform.select({ios: { paddingTop: 40 },android: { paddingTop: StatusBar.currentHeight },}),},box: {height: 100,width: 100,justifyContent: 'center',alignItems: 'center',borderWidth: 1,borderStyle: 'dashed',borderColor: 'darkslategray',backgroundColor: 'lightgray',},boxText: {color: 'darkslategray',fontWeight: 'bold',},row: {flex: 1,flexDirection: 'row',justifyContent: 'space-around',alignSelf: 'stretch',},column: {flex: 1,flexDirection: 'column',alignItems: 'center',justifyContent: 'space-around',alignSelf: 'stretch',},
})
 

组件部分
 

app
 

 

import { View, StatusBar } from 'react-native'
import styles from './styles'
import Row from './Row'
import Col from './Col'
import Box from './Box'
export default function App() {return (<View style={styles.container}><StatusBar hidden={false} /><Row><Col><Box>#1</Box><Box>#2</Box></Col><Col><Box>#3</Box><Box>#4</Box></Col></Row><Row><Col><Box>#5</Box><Box>#6</Box></Col><Col><Box>#7</Box><Box>#8</Box></Col></Row><Row><Col><Box>#9</Box><Box>#10</Box></Col><Col><Box>#11</Box><Box>#12</Box></Col></Row></View>)
}
 

col
 


import PropTypes from 'prop-types'
import { View } from 'react-native'
import styles from './styles'
export default function Column({ children }) {return <View style={styles.column}>{children}</View>
}Column.propTypes = {children: PropTypes.node.isRequired,
}

 

row
 


import PropTypes from 'prop-types'
import { View } from 'react-native'
import styles from './styles'
export default function Row({ children }) {return <View style={styles.row}>{children}</View>
}Row.propTypes = {children: PropTypes.node.isRequired,
}
 


import React from 'react'
import PropTypes from 'prop-types'
import { View, Text } from 'react-native'
import styles from './styles'
export default function Box({ children }) {return (<View style={styles.box}><Text style={styles.boxText}>{children}</Text></View>)
}Box.propTypes = {children: PropTypes.node.isRequired,
}
 

 

6、总结
 

欢迎加入群聊，我们一起讨论一些更有趣的技术、商业、闲聊。
 

 












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


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











相关文章










Leetcode 1336. 每次访问的交易次数








Leetcode 1336. 每次访问的交易次数




1.题目基本信息 
1.1.题目描述 
表: Visits 
---------------------- 
| Column Name | Type | 
---------------------- 
| user_id | int | 
| visit_date | date | 
---------------------- 
(user_id, visit_date) 是该表的主键(具有唯一值的列的组合) 
该表的每行表示 use…




阅读更多...

















腾讯云国际版和国内版账户通用吗？一样吗？为什么？








腾讯云国际版和国内版账户通用吗？一样吗？为什么？




在当今全球化的数字化时代&#xff0c;云计算服务成为众多企业和个人拓展业务、存储数据的重要选择。腾讯云作为国内领先的云服务提供商&#xff0c;其国际版和国内版备受关注。那么&#xff0c;腾讯云国际版和国内版账户是否通用&#xff1f;它们究竟一样吗&#xff1f;背后又…




阅读更多...

















解锁Java多级缓存：性能飞升的秘密武器








解锁Java多级缓存：性能飞升的秘密武器




一、引言 
文末有彩蛋 
在当今高并发、低延迟的应用场景中&#xff0c;传统的单级缓存策略往往难以满足性能需求。随着系统规模扩大&#xff0c;数据访问的瓶颈逐渐显现&#xff0c;如何高效管理缓存成为开发者面临的重大挑战。多级缓存架构应运而生&#xff0c;通过分层缓存设…




阅读更多...

















Android Kotlin 算法详解：链表相关








Android Kotlin 算法详解：链表相关




前言 &#x1f60a; 
在 Android 开发中&#xff0c;算法与数据结构是基本功之一&#xff0c;而链表&#xff08;Linked List&#xff09;作为常见的数据结构&#xff0c;经常出现在各类面试题与实际业务场景中。本文将以 Android Kotlin 为语言&#xff0c;结合 LeetCode 上的…




阅读更多...

















Blinko智能笔记系统实现跨平台同步与隐私保护的完整技术方案解析








Blinko智能笔记系统实现跨平台同步与隐私保护的完整技术方案解析




文章目录 前言1. Docker Compose一键安装2. 简单使用演示3. 安装cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 
点击跳转到网站 前言 
是否…




阅读更多...

















【小红书】API接口，获取笔记列表








【小红书】API接口，获取笔记列表




小红书笔记列表API接口详解 - 深圳小于科技助力高效数据对接 
深圳小于科技&#xff08;官网&#xff1a;https://www.szlessthan.com&#xff09;提供的小红书笔记列表API接口&#xff0c;帮助开发者快速获取小红书平台笔记数据&#xff0c;实现高效内容管理与分析。 接口概述…




阅读更多...

















Qwen2.5-VL 损失函数








Qwen2.5-VL 损失函数




Qwen2.5-VL 损失函数 
flyfish 
文章名称链接深入理解交叉熵损失 CrossEntropyLoss - 概率基础链接深入理解交叉熵损失 CrossEntropyLoss - 对数链接深入理解交叉熵损失 CrossEntropyLoss - 概率分布链接深入理解交叉熵损失 CrossEntropyLoss - 信息论&#xff08;交叉熵&#…




阅读更多...

















LeetCode 1524. 和为奇数的子数组数目








LeetCode 1524. 和为奇数的子数组数目




好的&#xff01;让我们详细解释 LeetCode 1524. 和为奇数的子数组数目 这道题的思路和解法。 
题目&#xff1a; https://leetcode.cn/problems/number-of-sub-arrays-with-odd-sum/description/ 
题目分析 
问题描述&#xff1a; 给定一个整数数组 arr&#xff0c;返回其中和…




阅读更多...

















kafka学习笔记（三、消费者Consumer使用教程——消费性能多线程提升思考）








kafka学习笔记（三、消费者Consumer使用教程——消费性能多线程提升思考）




1.简介 
KafkaConsumer是非线程安全的&#xff0c;它定义了一个acquire()方法来检测当前是否只有一个线程在操作&#xff0c;如不是则会抛出ConcurrentModifcationException异常。 acquire()可以看做是一个轻量级锁&#xff0c;它仅通过线程操作计数标记的方式来检测线程是否发…




阅读更多...

















百度蜘蛛池的作用是什么？技术@baidutopseo








百度蜘蛛池的作用是什么？技术@baidutopseo




百度蜘蛛池的作用 
百度蜘蛛池是一种用于集中管理和调度百度搜索引擎蜘蛛&#xff08;爬虫&#xff09;的技术工具。其主要目的是优化网站内容的收录效率&#xff0c;帮助搜索引擎更高效地发现和抓取网页内容。技术baidutopseo 
提升收录效率 
通过集中大量百度蜘蛛的访问请求&…




阅读更多...

















黑马Java面试笔记之 消息中间件篇（Kafka）








黑马Java面试笔记之 消息中间件篇（Kafka）




一. Kafka保证消息不丢失 Kafka如何保证消息不丢失 使用Kafka在消息的收发过程中都会出现消息丢失&#xff0c;Kafka分别给出了解决方案 
生产者发送消息到Brocker丢失消息在Brocker中存储丢失消费者从Brocker接收消息丢失 1.1 生产者发送消息到Brocker丢失 
设置异步发送 消息…




阅读更多...

















dis css port brief 命令详细解释








dis css port brief 命令详细解释




华为交换机命令 display css port brief 详细解释 
display css port brief 是华为交换机中用于 快速查看堆叠&#xff08;CSS&#xff0c;Cluster Switch System&#xff09;端口状态及关键参数 的命令&#xff0c;适用于日常运维、堆叠链路健康检查及故障定位。以下是该命令的…




阅读更多...

















Redis 缓存问题及其解决方案








Redis 缓存问题及其解决方案




1. 缓存雪崩 
概念&#xff1a;缓存雪崩是指在缓存层出现大范围缓存失效或缓存服务器宕机的情况下&#xff0c;大量请求直接打到数据库&#xff0c;导致数据库压力骤增&#xff0c;甚至可能引发数据库宕机。 
影响&#xff1a;缓存雪崩会导致系统性能急剧下降&#xff0c;甚至导…




阅读更多...

















使用Python进行函数作画








使用Python进行函数作画




前言 
因为之前通过deepseek绘制一下卡通的人物根本就不像&#xff0c;又想起来之前又大佬通过函数绘制了一些图像&#xff0c;想着能不能用Python来实现&#xff0c;结果发现可以&#xff0c;不过一些细节还是需要自己调整&#xff0c;deepseek整体的框架是没有问题&#xff0…




阅读更多...

















关于list集合排序的常见方法








关于list集合排序的常见方法




目录 
1、list.sort() 
2、Collections.sort() 
3、Stream.sorted() 
4、进阶排序技巧 
4.1 空值安全处理 
4.2 多字段组合排序 
4.3. 逆序 
5、性能优化建议 
5.1 并行流加速 
5.2 原地排序 
6、最佳实践 
7、注意事项 前言 Java中对于集合的排序操作&#xff0c;分别为list.s…




阅读更多...

















Java高级 | （二十二）Java常用类库








Java高级 | （二十二）Java常用类库




参考&#xff1a;Java 常用类库 | 菜鸟教程 一、核心Java类库 
二、常用第三方库 
以下是 Java 生态系统中广泛使用的第三方库&#xff1a; 
类别库名称主要功能官方网站JSON 处理JacksonJSON 序列化/反序列化https://github.com/FasterXML/jacksonGsonGoogle 的 JSON 库https:…




阅读更多...

















几种常用的Agent的Prompt格式








几种常用的Agent的Prompt格式




一、基础框架范式&#xff08;Google推荐标准&#xff09; 
1. 角色与职能定义 
<Role_Definition>
你是“项目专家”&#xff08;Project Pro&#xff09;&#xff0c;作为家居园艺零售商的首席AI助手&#xff0c;专注于家装改造领域。你的核心使命&#xff1a;
1. 协助…




阅读更多...

















蛋白质结构预测软件openfold介绍








蛋白质结构预测软件openfold介绍




openfold 是一个用 Python 和 PyTorch 实现的 AlphaFold2 的开源复现版&#xff0c;旨在提升蛋白质结构预测的可复现性、可扩展性以及研究友好性。它允许研究者在不开源 DeepMind 原始代码的情况下&#xff0c;自由地进行蛋白结构预测的训练和推理&#xff0c;并支持自定义模型…




阅读更多...

















AD转嘉立创EDA








AD转嘉立创EDA




可以通过嘉立创文件迁移助手进行格式的转换 
按照它的提示我们整理好文件 导出后是这样的&#xff0c;第一个文件夹中有原理图和PCB&#xff0c;可以把它们压缩成一个压缩包 这个时候我们打开立创EDA&#xff0c;选择导入AD 这样就完成了




阅读更多...

















MySQL(50)如何使用UNSIGNED属性？








MySQL(50)如何使用UNSIGNED属性？




在 MySQL 中&#xff0c;UNSIGNED 属性用于数值数据类型&#xff08;如 TINYINT、SMALLINT、MEDIUMINT、INT 和 BIGINT&#xff09;&#xff0c;表示该列只能存储非负整数。使用 UNSIGNED 属性可以有效地扩展列的正整数范围&#xff0c;因为它不需要为负数保留空间。 
1. 定义与…




阅读更多...


















最新文章


















Copyright @ 2022~2023