当前位置: 首页 > news >正文

React Native 样式表的基础知识

在 React Native 中我们要使用组件元素进行样式设置的话,我们需要使用StyleSheet组件才能制定样式。useColorScheme是为 APP 定义颜色主题的。在此笔记中我们只是简单做一个介绍和使用。

使用StyleSheet定义样式

当我们要使用StyleSheet的话,我们需要引入对应模块,并且使用create关键字进行样式对象创建。在 React Native 中布局方式采用的只有Flex布局方式,Flex 布局方式跟 CSS3 中的 Flex 布局一致。

我们在第一章节中笔记中已经写好了一个Hello World的程序,我们可以再这个基础上进行样式的添加,具体代码如下:

<View style={style.container}><Text>Hello World !</Text>
</View>
const style = StyleSheet.create({container: {display: "flex",flex: 1,justifyContent: "center",},
});

注意:SafeAreaView标签内的元素不能设置样式,这样会导致错误。

useColorScheme 颜色主题

useColorScheme是专门用于配色方案更新的 Hook。返回值表示当前用户首选的配色方案。具体的例子如下:

import React from "react";
import { Text, View, StyleSheet, useColorScheme } from "react-native";const App: React.FC = () => {const colorScheme = useColorScheme() === "dark";return (<View style={style.container}><Text style={colorScheme ? style.whiteText : style.blackText}>Hello World !</Text></View>);
};const style = StyleSheet.create({container: {display: "flex",flex: 1,justifyContent: "center",},whiteText: {color: "#FFFFFF",},blackText: {color: "#000000",},
});export default App;
http://www.lryc.cn/news/112196.html

相关文章:

  • 【JS 解构赋值】
  • Vue3状态管理库Pinia——自定义持久化插件
  • il汇编整数相加
  • RabbitMQ 事务
  • vue前端 让年月日 加上23:59:59
  • 【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板8
  • STM32--综述
  • Linux学习之sed、awk和vim的差异
  • MacOS上配置docker国内镜像仓库地址
  • 全志F1C200S嵌入式驱动开发(soc系统集成)
  • React路由5版本
  • 6.4.3 1x1卷积层
  • [CKA]考试之检查可用节点数量
  • 备考错题知识点总结
  • 初识Flask:Python轻量级Web框架入门教程
  • 【BASH】回顾与知识点梳理(七)
  • Python实现对IP网段的快速检测
  • 伪操作、C和汇编、ATPCS协议
  • OPENCV C++(五)滤波函数+sobel边缘检测+人脸磨皮mask
  • 20天突破英语四级高频词汇——第②天
  • 【Python 学习】第一个python案例
  • 【C#学习笔记】值类型(2)
  • 【设计模式】-建造者模式
  • 【N32L40X】学习笔记14-在RT-thread系统中读取eeprom数据
  • Python OpenCV读取并显示USB UVC摄像头
  • 针对高可靠性和高性能优化的1200V碳化硅沟道MOSFET
  • 在服务器上搭建gitlab
  • Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展
  • nginx的优化和防盗链 重要!!!
  • 十五.redis缓存穿透,击穿,雪崩