React Native零基础快速上手指南

开篇：为什么要写这篇教程

大家好，我是一名工作了5年的后端开发，平时除了写Java、Go，也折腾过不少前端和移动端的东西。当初学React Native的时候，踩了无数坑，网上的教程要么太老，要么一上来就扔一堆配置把人劝退。所以今天，我想用最简单的话，带你从零开始，亲手构建你的第一个React Native APP。

这篇文章会涉及React Native的基础入门，同时也会聊聊如何借助CodeGeeX、智谱清言、Kilo Code等AI工具，以及智能体开发的思路来加速你的学习和开发效率。别急，我们一步步来。

---

一、React Native是什么？

简单来说，React Native是Facebook（现在叫Meta）开源的一个框架，让你用JavaScript和React的语法来写原生移动应用（iOS和Android）。

你不需要学Swift、Objective-C或者Kotlin，只要你会写JavaScript，就能开发出看起来和用起来都像原生APP的应用。

用一句话总结：一套代码，跑在iOS和Android上。

---

二、环境准备

我当初学的时候，环境配置搞了我整整两天。现在官方工具链成熟了很多，跟着下面的步骤走，基本不会翻车。

2.1 前置依赖

依赖项	说明	安装方式
Node.js	JS运行环境，建议18+	官网下载或用nvm
Java JDK 17	Android编译需要	官网下载
Android Studio	提供SDK和模拟器	官网下载
Xcode（仅Mac）	iOS开发需要	App Store下载
Watchman（推荐）	文件监听工具	brew install watchman

2.2 创建项目

打开终端，执行：

npx react-native@latest init MyFirstApp

这条命令会帮你创建一个名为MyFirstApp的项目，自动安装好所有依赖。

💡 小技巧：如果你网络慢，可以先配置npm镜像源：

npm config set registry https://registry.npmmirror.com

2.3 启动项目

Android：

cd MyFirstApp
npx react-native run-android

iOS（仅Mac）：

cd MyFirstApp
npx react-native run-ios

第一次编译会比较慢，耐心等待。看到模拟器上出现"Welcome to React Native"的界面，恭喜你，环境搞定了！

---

三、核心概念：用最简单的话讲明白

3.1 组件（Component）

React Native的一切都是组件。组件就像乐高积木，你把一个个小组件拼起来，就构成了整个APP的页面。

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

// 这就是一个最简单的组件
const MyComponent = () => {
  return (
    <View>
      <Text>你好，React Native！</Text>
    </View>
  );
};

export default MyComponent;

• View 相当于HTML里的div，是一个容器
• Text 相当于HTML里的span或p，用来显示文字

3.2 Props 和 State

Props是父组件传给子组件的参数，是只读的。

const Greeting = (props) => {
  return <Text>你好，{props.name}！</Text>;
};

// 使用
<Greeting name="小明" />

State是组件自己的内部状态，是可变的。用useState来管理：

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>当前计数：{count}</Text>
      <Button title="加1" onPress={() => setCount(count + 1)} />
    </View>
  );
};

3.3 样式（Style）

React Native用JavaScript对象来写样式，不是CSS文件：

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

const StyledBox = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>我有样式啦</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    color: '#333',
    fontWeight: 'bold',
  },
});

📌 注意：React Native没有CSS类名，样式默认就是Flexbox布局，而且flexDirection默认是column（纵向），这和Web端不一样，新手容易踩坑。

---

四、实战项目：做一个待办清单APP

光看概念太抽象，我们直接动手做一个**待办清单（Todo List）**APP。

4.1 项目结构

MyFirstApp/
├── App.js          # 入口文件
├── components/
│   └── TodoItem.js # 单个待办项组件
└── package.json

4.2 编写App.js

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import TodoItem from './components/TodoItem';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState('');

  // 添加待办
  const addTodo = () => {
    if (inputText.trim() === '') return;
    const newTodo = {
      id: Date.now().toString(),
      text: inputText,
      done: false,
    };
    setTodos([...todos, newTodo]);
    setInputText('');
  };

  // 切换完成状态
  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    );
  };

  // 删除待办
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>📝 我的待办</Text>

      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.inputRow}
      >
        <TextInput
          style={styles.input}
          placeholder="输入新的待办事项..."
          value={inputText}
          onChangeText={setInputText}
          onSubmitEditing={addTodo}
        />
        <TouchableOpacity style={styles.addBtn} onPress={addTodo}>
          <Text style={styles.addBtnText}>添加</Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>

      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TodoItem
            todo={item}
            onToggle={toggleTodo}
            onDelete={deleteTodo}
          />
        )}
        ListEmptyComponent={
          <Text style={styles.emptyText}>暂无待办，快去添加吧 ✨</Text>
        }
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 50,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  inputRow: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    height: 45,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
  },
  addBtn: {
    marginLeft: 10,
    backgroundColor: '#4A90D9',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  addBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  emptyText: {
    textAlign: 'center',
    color: '#999',
    marginTop: 40,
    fontSize: 16,
  },
});

export default App;

4.3 编写TodoItem组件

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

const TodoItem = ({ todo, onToggle, onDelete }) => {
  return (
    <View style={styles.itemContainer}>
      <TouchableOpacity
        style={styles.todoContent}
        onPress={() => onToggle(todo.id)}
      >
        <Text
          style={[
            styles.todoText,
            todo.done && styles.todoTextDone,
          ]}
        >
          {todo.done ? '✅' : '⬜'} {todo.text}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onDelete(todo.id)}>
        <Text style={styles.deleteBtn}>🗑️</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  todoContent: {
    flex: 1,
  },
  todoText: {
    fontSize: 16,
    color: '#333',
  },
  todoTextDone: {
    textDecorationLine: 'line-through',
    color: '#aaa',
  },
  deleteBtn: {
    fontSize: 20,
    paddingLeft: 10,
  },
});

export default TodoItem;

运行起来，你就有了一个可以添加、勾选完成、删除的待办清单APP了！

---

五、借助AI工具加速开发

我当初学的时候，遇到问题只能去Stack Overflow一个个翻。现在不一样了，AI工具可以大幅提升你的效率。

5.1 CodeGeeX

CodeGeeX是智谱推出的AI代码助手，支持多语言代码生成和补全。在写React Native组件时，你可以让它帮你生成样板代码。比如你告诉它"帮我写一个带搜索功能的FlatList组件"，它能直接给你可用的代码。

5.2 智谱清言

智谱清言是一个通用AI对话助手。当你遇到React Native的报错信息看不懂时，直接把报错贴给它，它能帮你分析原因并给出解决方案。比如常见的Invariant Violation、Metro Bundler错误，它都能快速定位。

5.3 Kilo Code

Kilo Code是一个面向开发者的智能编程工具，它可以在你的IDE中提供上下文感知的代码建议。在写React Native的样式时，它能根据你当前的组件结构，推荐合适的Flexbox布局方案。

5.4 智能体开发思路

所谓智能体开发，就是把AI能力封装成可以自主执行任务的"智能体"。在React Native开发中，你可以思考这样的场景：

• 一个能自动检测代码规范并修复的智能体
• 一个能根据你的需求描述自动生成页面的智能体
• 一个能监控APP性能并给出优化建议的智能体

虽然这听起来很高级，但核心思路很简单：把重复性的开发工作交给AI智能体，你专注于业务逻辑。 这也是未来移动开发的重要趋势。

---

六、常见问题解答

Q1：运行时报错"SDK location not found"

原因：没有配置Android SDK路径。

解决：在项目根目录创建local.properties文件，写入：

sdk.dir=/你的Android SDK路径

Mac上通常是：/Users/你的用户名/Library/Android/sdk

Q2：Metro Bundler启动失败，端口被占用

解决：

# 查看占用8081端口的进程
lsof -i :8081
# 杀掉对应进程
kill -9 <PID>

Q3：热更新不生效

解决：

# 清除缓存重新启动
npx react-native start --reset-cache

Q4：样式不生效或者表现和预期不一样

记住几个关键点：

• React Native没有CSS继承，每个组件需要单独设置样式
• flex默认方向是column，不是row
• 不支持className，要用style属性
• 百分比写法有限制，尽量用flex或具体数值

---

七、学习建议与下一步

恭喜你读到这里！你已经完成了React Native的入门。下面是我给你的学习路径建议：

第一阶段：打牢基础（1-2周）

• 熟悉常用组件：View、Text、Image、ScrollView、FlatList、TextInput
• 掌握Flexbox布局，这是重中之重
• 学会用useState和useEffect

第二阶段：进阶能力（2-4周）

• 学习React Navigation做页面跳转
• 学习网络请求（fetch或axios）
• 了解状态管理（Context API或Zustand）

第三阶段：实战提升

• 做一个完整的项目，比如电商APP、社交APP
• 学习原生模块桥接（当JS搞不定时，写原生代码）
• 了解APP打包发布流程

避坑指南

1. 不要一开始就追求完美架构，先跑起来再说
2. 善用AI工具，像CodeGeeX、智谱清言、Kilo Code这些，能帮你节省大量查资料的时间
3. 多看官方文档，React Native的官方文档质量很高
4. 遇到问题先读报错信息，80%的问题报错里都有答案
5. 关注智能体开发的趋势，未来开发模式会发生变化，提前了解没坏处

---

总结

React Native让前端开发者能用熟悉的JavaScript来开发移动APP，学习曲线相对平缓。通过这篇教程，你已经了解了环境搭建、核心概念，并亲手完成了一个待办清单APP。

技术日新月异，AI工具如CodeGeeX、智谱清言、Kilo Code正在改变我们写代码的方式，智能体开发也在重新定义开发流程。保持学习，拥抱变化，你一定能在这个领域走得很远。

加油，期待看到你的第一个APP上架应用商店！