初识React-Nateive与跨平台开发

type

status

date

slug

summary

React Native 入门指南（React Native CLI 版）

React Native 是由Facebook公司推出的一套基于 JavaScript 的跨平台移动开发框架，它让 Web 开发者也能开发出原生 iOS 和 Android App。本文将带你掌握 React Native CLI 的搭建流程，学习路由、状态管理、样式布局及打包发布，避开新手常见陷阱。

一、跨平台开发

传统移动开发需分别使用 Swift/Objective-C（iOS）和 Java/Kotlin（Android），团队成本高、迭代慢。

React Native 是兼顾开发效率与原生体验的最佳平衡方案，尤其适合已有 React 技术栈的团队。

二、环境搭建（React Native CLI）

2.1 安装 Node.js、Yarn

可以使用 nvm 管理 Node 版本。

2.2 安装 React Native CLI

2.3 安装 Android Studio（Android）/ Xcode（iOS）

Android Studio：添加 Android SDK 和 Emulator

Xcode：安装命令行工具 xcode-select --install

配置 ANDROID_HOME：

三、创建第一个 App

启动 Android 模拟器

启动 iOS 模拟器（macOS）

目录结构：

四、页面与导航（React Navigation）

安装导航库

添加 Stack Navigator

配置示例：

五、状态管理

方式一：useState / useContext（适合小型项目）

方式二：Redux Toolkit

六、异步请求管理（redux-thunk 简单示例）

安装依赖

配置 store

示例 Action 与使用

七、样式与布局

使用 StyleSheet.create 创建样式，布局使用 Flexbox：

八、打包与发布

Android APK

APK 输出：android/app/build/outputs/apk/release/app-release.apk

iOS

需使用 Xcode 构建并上传 App Store。

React Native 入门指南（React Native CLI 版）

一、跨平台开发

二、环境搭建（React Native CLI）

2.1 安装 Node.js、Yarn

2.2 安装 React Native CLI

2.3 安装 Android Studio（Android）/ Xcode（iOS）

三、创建第一个 App

启动 Android 模拟器

启动 iOS 模拟器（macOS）

四、页面与导航（React Navigation）

安装导航库

添加 Stack Navigator

配置示例：

五、状态管理

方式一：useState / useContext（适合小型项目）

方式二：Redux Toolkit

六、异步请求管理（redux-thunk 简单示例）

安装依赖

配置 store

示例 Action 与使用

七、样式与布局

八、打包与发布

Android APK

iOS

wdkang