React Native快速入门：构建你的第一个APP

一、开篇：什么是React Native，它能做什么？

1.1 什么是React Native？

React Native 是由 Facebook（现 Meta）推出的一种跨平台移动开发框架。它允许我们使用 JavaScript 或 TypeScript 编写代码，并在 iOS 和 Android 平台上运行原生应用。

这意味着你只需要写一套代码，就可以同时发布到 iPhone 和安卓手机上。相比传统开发方式（如 Swift 或 Java），React Native 极大地提高了开发效率。

1.2 React Native 能用来做什么？

• 开发 企业级应用
• 构建 社交、电商类 APP
• 做出界面美观、交互流畅的移动端产品
• 快速原型开发（MVP）

小贴士：很多大公司都在用 React Native，比如 Facebook、Instagram、Airbnb、微软等。

---

二、环境准备：搭建你的开发环境

本节将带领你完成最基本的 React Native 开发环境配置，适合完全零基础的新手。

2.1 安装必要软件

我们需要以下几个工具：

工具	作用
Node.js	运行 JavaScript 的环境
Expo CLI	简化 React Native 开发和调试的工具
VS Code	推荐使用的代码编辑器
手机或模拟器	测试你的 App

步骤一：安装 Node.js

前往 https://nodejs.org/ 下载并安装“LTS”版本（推荐长期支持版本）。安装完成后，在命令行中输入：

node -v
npm -v

你应该看到类似这样的输出：

v18.16.0
9.5.1

步骤二：安装 Expo CLI

Expo 提供了一个非常友好的工具链来简化 React Native 的使用。运行以下命令安装：

npm install -g expo-cli

步骤三：安装 VS Code

前往 https://code.visualstudio.com/ 下载并安装 Visual Studio Code。

安装后可以添加一个插件：

• ESLint：帮助你检查代码错误
• Prettier：格式化代码

步骤四：创建第一个项目

打开终端（Windows 用户可用 CMD 或 PowerShell），运行以下命令：

npx create-expo-app MyFirstApp
cd MyFirstApp
npx expo start

这会自动启动一个本地开发服务器，并弹出一个二维码。你可以使用手机上的 Expo Go App 扫描二维码，在手机上实时预览你的应用！

📱提示：如果你没有安装 Expo Go，可以在 App Store 或 Google Play 搜索 “Expo Go” 安装。

---

三、核心概念：理解关键知识点

作为初学者，你不需要一开始就掌握所有细节。下面我用最简单的语言解释几个必须了解的概念。

3.1 什么是组件（Component）？

在 React Native 中，整个 App 都是由一个个“小部件”组成的。这些小部件就叫做“组件”。

你可以把它想象成乐高积木块。每个积木都有自己的形状、颜色，但它们可以拼在一起组成一个完整的模型。

示例代码：一个简单的文本组件

import React from 'react';
import { Text } from 'react-native';

export default function App() {
  return (
    <Text>你好，React Native！</Text>
  );
}

✅说明：

• import 表示引入某个功能模块
• Text 是 React Native 提供的一个基本组件，用于显示文字

3.2 样式怎么写？

React Native 使用的是 JavaScript 对象 来定义样式，而不是 HTML/CSS 中的类名方式。

示例代码：给文字加颜色和字号

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

export default function App() {
  const myStyle = {
    color: 'blue',
    fontSize: 24,
    fontWeight: 'bold',
  };

  return (
    <View style={{ padding: 20 }}>
      <Text style={myStyle}>我的第一个样式！</Text>
    </View>
  );
}

💡注意：

• 所有样式都通过 style 属性传入
• 支持 Flexbox 布局（稍后介绍）

3.3 页面布局（Flexbox 简介）

Flexbox 是一种流行的布局方式，让你轻松控制元素的位置和排列。

示例代码：水平和垂直居中

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Text>我是居中的文字</Text>
    </View>
  );
}

✅常用属性：

• flexDirection: 控制排列方向（row: 水平，column: 垂直）
• justifyContent: 控制主轴对齐方式
• alignItems: 控制交叉轴对齐方式

---

四、实战项目：动手做一个“欢迎页面”

我们将一步步构建一个简单的欢迎页面，包含：

• 欢迎语
• 一张图片
• 一个按钮

步骤 1：导入组件

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

步骤 2：创建 App 函数组件

export default function App() {
  return (
    <View style={styles.container}>
      {/* 欢迎文本 */}
      <Text style={styles.title}>欢迎来到我的App!</Text>

      {/* 图片 */}
      <Image
        source={{ uri: 'https://picsum.photos/200' }}
        style={styles.image}
      />

      {/* 按钮 */}
      <Button title="点击开始" onPress={() => alert('Hello!')} />
    </View>
  );
}

步骤 3：添加样式表

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 20,
  }
});

最终效果：

• 打开 App 后显示“欢迎来到我的App!”
• 下方是一张图片
• 再下面是一个按钮，点击会弹出“Hello!”

✅练习建议：

• 更换图片地址试试不同图片
• 修改背景色看看变化
• 把按钮换成 <TouchableOpacity> 自定义按钮样式

---

五、常见问题解答（FAQ）

以下是一些新手常遇到的问题和解决办法：

Q1：为什么无法加载图片？

• 如果是本地图片，请确保路径正确（如：require('./assets/logo.png')）
• 网络图片要加上合适的尺寸（如上面的 width 和 height）
• iOS 有时需要设置 HTTPS 允许，可在 ios/Info.plist 中添加 App Transport Security 例外

Q2：按钮按下去没反应怎么办？

• 检查是否有拼写错误：onPress 而不是 onclick
• 确保函数体语法正确，不要漏了括号或引号
• 可以先加个 console.log() 看是否执行

Q3：样式不起作用？

• 确保使用的是对象样式（例如：{{ color: 'red' }}）
• 使用 StyleSheet.create 更安全，更易维护
• Flex 相关属性需要父容器设置 flex: 1 才能生效

---

六、学习建议：下一步该怎么做？

恭喜你完成了第一个 React Native 应用！接下来你可以继续学习以下内容，逐步成为专业的移动开发者。

✅ 第一步：巩固基础知识

• 学习状态管理（state）与事件处理
• 理解生命周期函数（componentDidMount 等）
• 掌握导航器（Navigation）实现页面跳转

✅ 第二步：进阶技能

• 学习如何调用 API 获取数据（fetch / axios）
• 使用 Redux / MobX 做全局状态管理
• 引入第三方 UI 库（如：React Native Elements）

✅ 第三步：实战提升

• 开发一个 ToDo List 类型的完整 App
• 加入登录注册、本地存储、地图等功能
• 学习打包发布到 Apple Store 和 Google Play

---

结语：编程就是不断实践的过程

React Native 是一门非常适合入门移动开发的技术。虽然一开始可能会感到陌生，但只要你跟着教程多敲几次代码，就会发现它其实很有趣、很有成就感。

记住一句话：

“不会不要怕，就怕不动手。”

坚持练习，不断尝试，你的第一个正式上线的 App 一定会很快诞生！

---

🎯如果你想了解更多 React Native 的知识，或者想深入学习移动端开发，请继续关注后续的系统课程。

加油！未来的移动开发大师，正在从这里启程🚀