React Native 中的核心组件是什么？

Question

Accepted Answer

React Native 提供了一组**核心组件** — 如 **View**、**Text**、**Image**、**ScrollView**、**TextInput** — 这些组件映射到原生 UI 元素。它们是 React Native UI 的基本构建块，用来代替 web HTML 元素。 ## Core components（与 web HTML 对比） ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## Example ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## 与 web 的关键区别 ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## 为什么这很重要理解核心组件对于 React Native 开发至关重要，因为**它们是每个 React Native UI 的构建块** — 你组合这些组件来构建界面，所以这是必须了解的基础知识。 React Native 提供了**自己的组件**，这些组件映射到原生视图（而不是 web HTML 元素），理解其中的基本组件 — **View**（容器，类似 div）、**Text**（用于所有文本，重要的是所有文本必须在 Text 组件内，不同于 web）、**Image**、**TextInput**、**ScrollView**、**FlatList**（用于高效的长列表）以及 touchables/**Pressable**（用于处理点击） — 这对于构建任何 React Native UI 都是必要的。理解**与 web 的关键区别**对于从 web/React 过渡到 React Native 的开发者尤其重要：使用 View 代替 div，使用 Text 代替 p/span（带有 all-text-in-Text 规则），通过 style prop 进行样式设置而不是 CSS 类/文件，使用 touchables/Pressable 处理交互而不是 onClick，以及使用 **FlatList 处理长列表**（它能高效/延迟渲染）而不是映射所有内容 — 这些区别是常见的绊脚石，理解核心组件会澄清这些问题。组件进行组合（类似 React）来构建 UI，其中 View 是基础容器。由于核心组件是每个 React Native UI 的构建块（你不断使用它们来构造界面），且理解它们以及它们与 web HTML 的区别对于构建 React Native 应用是基础性的（特别是对于 web 开发者），理解核心组件是必要的、基础的 React Native 知识 — 是 React Native UI 的基本词汇，对于构建任何界面和将 web React 知识适配到原生组件模型是必要的，是 React Native 开发的核心能力。