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

React Native 样式表的基础知识

news 2025/7/10 23:38:47

在 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;