零基础也能上手！React Native 开发你的第一个 App

大家好，我是一名从培训班走出来的前端开发者，如今在一线大厂做移动开发。当初学 React Native 的时候，踩过无数坑：环境配不对、报错看不懂、文档太抽象……最崩溃的是，投简历时连“会 React Native”都不敢写——因为根本没做出一个能运行的 App。

今天我就用最直白的方式，带完全零基础的朋友，亲手搭建并运行你的第一个 React Native 应用。哪怕你连“原生开发”是什么都不知道，也没关系。这篇文章还会聊聊技术选型、如何把项目写进简历，甚至和运营同学协作的小技巧——这些，都是培训班不会教，但工作中天天用的干货。

---

为什么选 React Native？和其他方案比一比

很多新手一上来就问：“我该学 Flutter 还是 React Native？”别急，我们先看张对比表：

技术方案	学习门槛	社区生态	热更新支持	适合人群
React Native	中（需 JS 基础）	⭐⭐⭐⭐⭐	✅ 支持	有 Web 前端经验者
Flutter	中高（Dart 语言）	⭐⭐⭐⭐	❌ 审核限制	追求高性能 UI
原生开发	高（Java/Swift）	⭐⭐⭐⭐⭐	❌ 不支持	专注单一平台深度开发

我当初选 React Native，就是因为它用 JavaScript 写代码，一套代码跑 iOS 和 Android，还能快速迭代——这对小团队或个人开发者太友好了。更重要的是，企业用得多，写进简历才有含金量。

💡 小贴士：如果你目标是“快速做出一个 App 投简历”，React Native 是目前性价比最高的选择。

---

第一步：搭建开发环境（手把手版）

别怕！现在官方工具已经简化很多了。我们用 Expo —— 它就像“React Native 的脚手架”，省去配置 Xcode、Android Studio 的麻烦。

安装步骤（Mac/Windows 通用）

1. 安装 Node.js（>=16.0）
   去官网 nodejs.org 下载安装，装完后终端输入：

   node -v
   # 应该输出 v18.x 或更高
   

2. 全局安装 Expo CLI

   npm install -g expo-cli
   

3. 创建新项目

   expo init MyFirstApp
   # 选择 "blank (TypeScript)" 模板
   cd MyFirstApp
   npm start
   

4. 扫码预览
   命令运行后会弹出浏览器窗口，用手机下载 Expo Go App（iOS/Android 商店都有），扫描二维码，就能看到你的 App 运行在真机上了！

✅ 我当初卡在“npm start 报错”，后来发现是 Node 版本太低。记住：Node >=16 是底线！

---

核心概念：用生活例子讲清楚

React Native 本质是“用 React 写移动界面”。你不需要懂原生，但要理解三个核心：

1. 组件（Component）

就像乐高积木，每个 UI 元素都是一个组件。比如按钮、文字、图片。

// 定义一个问候组件
function Greeting({ name }) {
  return <Text>Hello, {name}!</Text>;
}

2. 样式（StyleSheet）

不能用 CSS！要用 StyleSheet.create 定义样式对象：

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

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  }
});

// 使用
<Text style={styles.title}>欢迎</Text>

3. 状态（State）

想让界面动起来？用 useState：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <Button title={`点了 ${count} 次`} onPress={() => setCount(count + 1)} />
  );
}

🌟 关键：所有 UI 变化都来自状态更新。这是 React 的核心思想。

---

实战：做一个“今日运营任务”小工具

假设你是运营助理，每天要记录几项任务完成情况。我们做个极简 App：

功能需求

• 显示今日日期
• 列出 3 项任务（可勾选）
• 底部显示完成进度

代码实现（App.tsx）

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

export default function App() {
  const today = new Date().toLocaleDateString();
  
  const [tasks, setTasks] = useState([
    { id: 1, text: '发布今日推文', done: false },
    { id: 2, text: '回复用户评论', done: true },
    { id: 3, text: '整理数据报表', done: false },
  ]);

  const toggleTask = (id: number) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, done: !task.done } : task
    ));
  };

  const completed = tasks.filter(t => t.done).length;
  const progress = Math.round((completed / tasks.length) * 100);

  return (
    <View style={styles.container}>
      <Text style={styles.date}>{today}</Text>
      
      {tasks.map(task => (
        <TouchableOpacity 
          key={task.id} 
          onPress={() => toggleTask(task.id)}
          style={styles.task}
        >
          <Text style={[styles.taskText, task.done && styles.done]}>
            {task.text}
          </Text>
        </TouchableOpacity>
      ))}

      <Text style={styles.progress}>今日完成度: {progress}%</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, backgroundColor: '#f5f5f5', flex: 1 },
  date: { fontSize: 20, fontWeight: 'bold', marginBottom: 20 },
  task: { padding: 12, backgroundColor: 'white', marginVertical: 5, borderRadius: 8 },
  taskText: { fontSize: 16 },
  done: { textDecorationLine: 'line-through', color: '#999' },
  progress: { marginTop: 20, fontSize: 18, textAlign: 'center' }
});

效果说明

• 点击任务文字可切换完成状态
• 已完成的任务会显示删除线
• 底部实时计算完成百分比

💼 这个项目可以直接放进简历！标题写：“独立开发运营效率工具（React Native）”，描述里强调“解决运营同事每日任务追踪痛点”。

---

新手常见问题 & 避坑指南

Q1: 为什么改了代码，手机上没更新？

• 原因：Expo 默认开启“自动刷新”，但有时会卡住。
• 解决：在 Expo Go App 里摇晃手机 → 点 “Reload”，或按 r 键重启。

Q2: 样式怎么和网页 CSS 不一样？

• 关键差异：
  • 默认是 flexDirection: 'column'
  • 不能用 px，单位是无单位的数字（如 fontSize: 16）
  • 不支持 float、position: absolute 行为也不同

Q3: 能不能访问相机、相册等原生功能？

• 可以！ Expo 提供了大量内置 API，比如：

  import * as ImagePicker from 'expo-image-picker';
  const result = await ImagePicker.launchImageLibraryAsync();
  

  无需原生代码，一行调用搞定。

---

下一步学习建议

1. 巩固基础：先掌握 View, Text, Button, ScrollView, FlatList 这几个核心组件。
2. 学导航：用 @react-navigation/native 实现多页面跳转（运营后台常需要多页）。
3. 接真实 API：用 fetch 获取运营数据，展示在 App 里。
4. 打包发布：学会用 Expo EAS Build 打包成 .apk 或 .ipa，真正交付给运营同事使用。

最后一句真心话：不要等“学完再做项目”。你现在这个“任务追踪器”，就已经值半份实习简历了。我当初就是靠一个类似的 Demo，拿到了第一份 offer。

---

动手吧！你的第一个 App 不需要完美，但一定要跑起来。当你在手机上看到自己写的代码变成界面时，那种成就感，会推着你走得更远。