核心组件与样式

常用组件

组件	用途
View	布局容器
Text	文本内容；字符串必须位于 Text 内
Image	本地或远程图片
TextInput	文本输入
Pressable	按压、悬停和焦点交互
ScrollView	少量、整体渲染的滚动内容
FlatList	长列表和按需渲染
Modal	原生模态层

React Native 不提供 DOM 元素，也不支持直接使用浏览器事件和 CSS 选择器。

样式

样式使用 JavaScript 对象。属性采用 camelCase，长度数值通常表示逻辑像素：

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

export function ProfileCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Vfan</Text>
      <Pressable style={({ pressed }) => [styles.button, pressed && styles.pressed]}>
        <Text style={styles.buttonText}>关注</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  card: {
    gap: 12,
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  button: {
    alignItems: 'center',
    paddingVertical: 10,
    borderRadius: 8,
    backgroundColor: '#2563eb',
  },
  pressed: {
    opacity: 0.7,
  },
  buttonText: {
    color: '#ffffff',
  },
})

Flexbox

React Native 的主要布局方式是 Flexbox，与 Web 的关键差异包括：

• flexDirection 默认为 column；
• 元素没有 CSS 级联和外边距合并；
• flex 通常使用单个数值；
• 文本尺寸、状态栏和安全区域会影响实际可用空间。

列表

长列表使用 FlatList，并提供稳定的 key：

import { FlatList, Text } from 'react-native'

type Item = { id: string; title: string }

export function ItemList({ items }: { items: Item[] }) {
  return <FlatList data={items} keyExtractor={(item) => item.id} renderItem={({ item }) => <Text>{item.title}</Text>} />
}

不应使用 ScrollView 包裹同方向的长 FlatList，否则会破坏虚拟化并增加内存占用。

平台适配与可访问性

• 使用 SafeAreaProvider 和安全区域 inset 避免内容被刘海、圆角或系统栏遮挡；
• 使用 Platform.select 或平台文件处理必要差异；
• 为交互元素提供 accessibilityLabel、accessibilityRole 和足够的点击区域；
• 字体缩放和深色模式应作为正常系统状态处理。

参考资料

• React Native 核心组件
• React Native 样式
• React Native Flexbox