React Academy · 课时

使用 StyleSheet API 与 Flexbox 设置样式

Q: 「使用 StyleSheet API 与 Flexbox 设置样式」这节课中我会学到什么？

使用 StyleSheet.create 和 Flexbox 编写移动端样式，无需 CSS 类名。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 StyleSheet.create 和 Flexbox 编写移动端样式，无需 CSS 类名。

使用 StyleSheet API 与 Flexbox 设置样式 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

React Native 中没有 CSS

React Native 使用 JavaScript 样式 API：没有 CSS 文件、没有类名，也没有级联。样式是通过 style 属性应用的 JavaScript 对象。

StyleSheet.create()

将样式对象包装在 StyleSheet.create() 中，以获得更好的性能（样式只会被验证和优化一次）以及 IDE 自动补全支持。

import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

内联样式

通过 style 属性直接应用样式。数组语法可以合并多个样式对象，后面的样式会覆盖前面的样式。

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

React Native 中的 Flexbox

React Native 默认使用 Flexbox 进行布局，但默认值与 Web 不同：flexDirection 默认为 'column'（而不是 'row'），flex: 1 会填满可用空间。

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

行布局

使用 flexDirection: 'row' 将子元素水平排列，效果类似于 CSS 的 display: flex; flex-direction: row。

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex 与宽度/高度

使用 flex: N 进行按比例调整大小。flex: 1 会填满所有剩余空间；flex: 2 获得的空间是同级 flex: 1 元素的两倍。

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

绝对定位

对叠加元素使用 position: 'absolute' 以及 top、right、bottom、left，其效果与相对父元素中的 CSS 绝对定位相同。

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

平台特定样式

使用 Platform.OS 或 Platform.select() 为 iOS 和 Android 应用不同的样式。

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

颜色

React Native 接受 CSS 颜色字符串（十六进制、rgb、命名颜色）以及用于系统颜色的 PlatformColor API。

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

使用属性实现动态样式

在组件内部根据属性计算样式。您可以向 StyleSheet 传入函数，也可以直接在代码中计算样式对象。

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

快速检查

React Native 中 flexDirection 的默认值是什么（它与 Web 不同）？

回顾

使用 StyleSheet.create() 创建经过优化的样式，并通过 style 属性应用这些样式。React Native 中 Flexbox 的默认值是 flexDirection: 'column'，而 flex: 1 会填充剩余空间。使用 Platform.select() 应用特定于 OS 的阴影样式。

常见问题解答

「使用 StyleSheet API 与 Flexbox 设置样式」课时是免费的吗？

是的 — 「使用 StyleSheet API 与 Flexbox 设置样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 StyleSheet API 与 Flexbox 设置样式」这节课中我会学到什么？

使用 StyleSheet.create 和 Flexbox 编写移动端样式，无需 CSS 类名。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 StyleSheet API 与 Flexbox 设置样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy