React Academy · 课时

React Native 核心组件与 Web DOM

Q: 「React Native 核心组件与 Web DOM」这节课中我会学到什么？

将 View、Text、Image、ScrollView 映射到对应的 DOM 元素，并了解桥接模型。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 View、Text、Image、ScrollView 映射到对应的 DOM 元素，并了解桥接模型。

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

为何 React Native 中没有 HTML

React Native 会渲染为原生的 iOS 和 Android UI 组件，而不是浏览器 DOM。这里没有 <div>、<p> 或 <img>——每个平台都有自己的原生基础组件。

视图——相当于分区元素

View 是 React Native 中最基本的布局容器。在 iOS 上它映射到 UIView，在 Android 上映射到 android.view.View。您可以把它理解为一个不能直接容纳文本的 <div>。

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

function Card() {
  return (
    <View style={styles.card}>
      {/* children go here */}
    </View>
  );
}

const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 8 } });

文本——相当于段落/内联文本元素

任何可见文本都必须使用 Text。与 Web 不同，您不能直接将字符串放在 View 中——必须将其包裹在 <Text> 中。

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

function Greeting() {
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

图像——相当于图像元素

Image 用于渲染图像。对于本地资源，请将 require() 与 source 属性配合使用；对于网络图像，请使用 { uri: '...' } 对象。

import { Image } from 'react-native';

// Local asset:
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Network image (must provide dimensions):
<Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 200, height: 150 }} />

ScrollView——相当于溢出滚动

ScrollView 是可滚动容器。与 Web 不同，您必须显式使用它——View 不会滚动。对于较长的列表，请优先使用 FlatList。

import { ScrollView, Text } from 'react-native';

function Article({ paragraphs }) {
  return (
    <ScrollView>
      {paragraphs.map((p, i) => <Text key={i}>{p}</Text>)}
    </ScrollView>
  );
}

FlatList——虚拟化列表

FlatList 只渲染可见项目，并回收屏幕外的项目——这对于大型数据集的性能至关重要。

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

function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TouchableOpacity——相当于按钮

TouchableOpacity（较新的 RN 中还有 Pressable）可以为任何视图添加触摸反馈。onPress 属性负责处理点击。

import { TouchableOpacity, Text } from 'react-native';

function Button({ onPress, title }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

TextInput——相当于输入框

TextInput 是受控输入字段。它支持 value、onChangeText、placeholder 和键盘类型。

import { TextInput, useState } from 'react-native';

function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
      keyboardType="default"
    />
  );
}

ActivityIndicator——加载指示器

ActivityIndicator 是原生加载指示器。在 iOS 上它是圆形加载指示器；在 Android 上则是 Material 圆形进度指示器。

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <ActivityIndicator size="large" color="#4f46e5" />
</View>

SafeAreaView

SafeAreaView 会在 iOS 和 Android 上自动为设备刘海、状态栏和主屏幕指示器添加内边距。

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MyScreen />
    </SafeAreaView>
  );
}

模态框

Modal 会在应用上层渲染一个覆盖层。visible 属性控制是否显示该覆盖层。

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

<Modal visible={showModal} animationType="slide" transparent={true}>
  <View style={styles.overlay}>
    <View style={styles.dialog}>
      <Text>Are you sure?</Text>
    </View>
  </View>
</Modal>

快速检查

要在屏幕上显示任何文本，必须使用哪个 React Native 组件？

回顾

React Native 会将 Web 概念映射为原生组件：View（分区元素）、Text（段落）、Image（图像）、ScrollView、FlatList（虚拟化列表）、TextInput（输入框）和 TouchableOpacity（按钮）。根布局始终应使用 SafeAreaView。

常见问题解答

「React Native 核心组件与 Web DOM」课时是免费的吗？

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

「React Native 核心组件与 Web DOM」这节课中我会学到什么？

将 View、Text、Image、ScrollView 映射到对应的 DOM 元素，并了解桥接模型。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「React Native 核心组件与 Web DOM」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy