HelloWorld 与 React Native 教程
2026年7月1日
•
作者：admin
创建 React Native 的 HelloWorld，核心流程很简单：先准备 Node 与包管理器，选用 Expo 或原生（bare）工作流，初始化项目后在 App.js 写入基础 JSX（View 与 Text），用 expo start 或 npx react-native run-android/run-ios 在模拟器或真机运行，借助热重载和调试工具逐步调整，即可看到“Hello World”。
为什么要学 React Native 的 HelloWorld？
先说结论：HelloWorld 并不是炫技，而是把整个开发链路从零到可见的最小闭环走通。你会理解安装、初始化、编辑、运行与调试这几步的相互关系，顺便知道选择 Expo 还是原生时的利弊。下面我按费曼方法把每一步拆解，像和自己解释似的慢慢讲。
准备工作（环境与工具）
- 系统：Windows、macOS 或 Linux（iOS 真机/模拟器需要 macOS）。
- Node.js：推荐 LTS 版本，安装后带 npm。也可以用 yarn 作为替代包管理器。
- Java（Android 开发需 JDK），以及 Android Studio（包含 SDK 与模拟器）。
- 如果要跑 iOS，需要 Xcode（仅 macOS）。
- 可选：Expo CLI（更快上手）或直接用 React Native CLI（更贴近原生）。
选择：Expo 还是 Bare workflow（原生）？
简单来讲：
| 特性 | Expo | Bare / React Native CLI |
| 上手难度 | 低（适合快速原型、教学） | 中高（涉及原生配置） |
| 原生模块 | 受限（需 Expo 模块或 eject） | 完全自定义，可使用任意原生库 |
| 构建与发布 | 提供托管构建服务（更简单） | 需要自己配置 CI/CD 与构建流程 |
如何选择（简单规则）
- 如果只是学习或快速验证概念，选 Expo。
- 如果需要定制原生功能（比如复杂的原生 SDK），选 Bare。
初始化项目（两条主路线）
Expo（推荐新手）
- 安装：在终端运行
npm install -g expo-cli（或使用 npx）。 - 创建：
expo init hello-expo，按提示选择模板（blank）。 - 启动：进入项目目录
cd hello-expo，运行expo start。
Bare / React Native CLI
- 使用：
npx react-native init HelloNative（建议用 npx 确保最新模板）。 - 运行 Android：在模拟器或真机已连接的前提下，运行
npx react-native run-android。 - 运行 iOS（macOS）：
npx react-native run-ios。
HelloWorld 的核心代码（App.js）
把复杂的概念放到最小可运行示例，让每一行都有意义。下面是一个典型的 App.js（函数组件，使用 Hooks）：
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<Text>这是第一个 React Native 应用。</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontSize: 24,
fontWeight: '600'
}
});
解释一下：View 类似于网页里的 div，Text 用来渲染文字（必须用 Text 包裹文本），样式通过 StyleSheet.create 管理，使用 flex 布局。
如何运行并看到“Hello World”
- Expo：运行
expo start，会打开 Metro 打包器页面，扫码或启动模拟器。 - React Native CLI：运行
npx react-native run-android或npx react-native run-ios。 - 实时反馈：修改代码后保存，Metro 会触发热重载（Hot Reload / Fast Refresh）。
常见问题与排错思路（费曼式思考：把问题分解）
- 无法安装依赖：检查 Node 版本、网络、代理与 npm/yarn 缓存。
- 模拟器无法启动：Android Studio 是否安装 SDK；iOS 是否有 Xcode 命令行工具。
- 编译错误：看错误堆栈，通常是缺少原生模块或版本不兼容。
- 看不到文本：确认 Text 被包裹，样式颜色是否与背景相同。
调试技巧
React Native 提供多种调试方式，常用的有：
- Console.log：最直接，输出到 Metro 或设备的日志。
- Remote JS Debugging：用 Chrome DevTools 调试 JS（注意性能差异）。
- React DevTools：查看组件树与 props/state。
- 原生日志：Android 的 logcat、iOS 的 Xcode 控制台，用于 native 层问题。
性能与优化入门
刚开始不用过度优化，但有几点值得早期注意：
- 避免大量不必要的重渲染（使用 React.memo、useCallback、useMemo）。
- 列表渲染用 FlatList 替代 ScrollView，当数据很多时要启用分页/按需加载。
- 图片应该尽量压缩，并使用合适的 resizeMode 与占位策略。
国际化（i18n）与本地化（L10n）提示
既然你可能关心多语种：React Native 可以利用 i18n 库（如 i18next、react-native-localize）实现多语言切换。实现步骤通常是：
- 检测设备语言或允许用户切换。
- 维护语言字典（JSON 文件），把界面文本抽离出来。
- 在组件中通过翻译函数取文本，避免硬编码。
实务上还要注意时间/数字/货币的本地化、文本长度差异对布局的影响、以及从右到左（RTL）语言的支持。
发布与构建（大致流程）
- Expo：可以用 Expo 的托管构建或 EAS，流程比较顺畅。
- Bare：需要在 Android Studio 与 Xcode 配置签名、打包脚本，常见 CI 工具是 GitHub Actions / GitLab CI / Jenkins。
常用第三方库（快速起步推荐）
- 导航：react-navigation（界面导航）
- 状态管理：Redux / MobX / Recoil / Zustand（视项目复杂度而定）
- 网络请求：axios 或 fetch（内置）
- 表单：formik + yup（验证）
- 国际化：i18next / react-native-localize
一个小清单（把知识点串成行动步骤）
- 安装 Node、Android Studio（和 Xcode 如果需要）。
- 决定使用 Expo 还是 React Native CLI。
- 初始化项目，运行默认模板，确认能在设备/模拟器上看到界面。
- 替换 App.js 内容为 HelloWorld 示例，保存并观察热重载。
- 试着修改样式、添加按钮、导航，逐步增加复杂度。
学习路径建议（像给朋友解释）
如果你是刚接触，按这个顺序比较踏实：
- 先用 Expo 做一个简单的 HelloWorld 并跑在真机上（感觉成就感很重要）。
- 了解 JSX、组件、props、state、Hooks 的基本概念。
- 学习调试工具与常见问题的排查方法。
- 尝试把应用转成 Bare（如果需要原生能力），或继续用 Expo 开发并学习构建发布流程。
一些小提示（我写东西边想边记下的）
- 别忘了：React Native 的样式不是 CSS，但灵感很多相通，注意单位都是无关 dpi 的“抽象像素”。
- Text 必须包裹字符串，否则会有运行时报错或渲染异常。
- 遇到奇怪的构建错误，尝试清缓存：
npm start -- --reset-cache或删除 node_modules 重新安装。
写到这儿，我又想起一句话：最好的学习方式就是动手，把“Hello World”从屏幕上删掉再打回来几遍，你会记住每一步的细节。后面遇到真机难题、依赖冲突或构建签名问题时，回头看这些基础步骤，会发现它们都在支撑着整个流程。声明一下，本文涉及的命令与工具是基于官方常见实践和社区经验整理的，具体版本或环境可能影响具体命令，用时留意官方文档更新（React Native、Expo、Android Studio、Xcode 等）。
相关文章
了解更多相关内容
