已发布·持续改进
Framework · 2015 年发布
React Native 是使用 React 和 JavaScript 或 TypeScript 构建 Android 与 iOS 应用的开源框架,用一套代码为两个平台渲染原生界面。
React Native 是 Meta 于 2015 年发布的开源框架,让你沿用 React 的组件模型来开发 Android 和 iOS 应用。界面不是在 WebView 中显示,而是用各平台的原生视图渲染,因此应用的外观和响应与普通原生应用一致。如今它由 Meta 与社区及合作企业共同开发,默认启用的 New Architecture 让 JavaScript 与原生代码的连接更加直接。
对于已经在 Web 端使用 React、希望用同样的知识和工具开发移动应用的团队,React Native 尤其合适。一套代码同时面向两个平台,需要时仍可用 Kotlin 或 Swift 编写原生代码扩展,Fast Refresh 能在保存后立即显示修改结果。它广泛用于电商、社交、企业内部应用等页面多、发布节奏快的应用,也可以只嵌入现有原生应用中的部分页面。
入门时,按照官方文档的推荐使用 Expo 创建项目是最简单的方式。安装 Node.js,用 create-expo-app 创建项目,再在手机上安装 Expo Go 并扫描二维码即可运行。建议先掌握 React 基础,然后跟随官方文档中的核心组件指南和 Expo 教程,动手做一个小应用。
View、Text、Image 等组件以各平台的原生视图渲染,呈现符合平台习惯的外观与交互。
直接使用组件、props、状态和 Hooks 等 React 概念,以及 TypeScript 和 npm 生态。
Fast Refresh 在保留状态的同时应用代码修改,React Native DevTools 负责调试。
通过 New Architecture 的 Turbo Native Module 和 Fabric 组件,可直接连接 Kotlin 与 Swift 代码。
React Native 的工具运行在 Node.js 上。从 nodejs.org 安装 LTS 版本,并确认能显示版本号。Android 模拟器需要 Android Studio,iOS 模拟器需要 macOS 和 Xcode。
node --version按照官方文档的推荐,用 Expo 创建新项目。生成的模板已配置好 TypeScript 和基于文件的路由(Expo Router)。
npx create-expo-app@latest my-app在项目目录中启动开发服务器,然后用手机上的 Expo Go 扫描二维码,或在终端中按 a(Android)或 i(iOS)打开应用。
cd my-app && npx expo start在用 blank-typescript 模板创建的项目中,App.tsx 是应用的根组件。View 是布局容器,Text 是显示文字的核心组件,所有文字都必须放在 Text 中。通过 StyleSheet.create 创建的样式使用 Flexbox 将内容居中。修改并保存文件后,Fast Refresh 会立即更新正在运行的应用。
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo start共六章,带你从安装一步步了解 React Native 的核心概念。
在这里提问、分享经验,交流关于 React Native 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。
来发表第一条评论吧。