超级会员免费看
React Native：何时使用及入门指南
何时使用 React Native
并非每个开发者或团队都需要使用 React Native。以下几种场景可帮助你判断是否应考虑使用它：
1. 独立开发者
- 若你首次学习 React 或仅将其用于副业项目，可能会出于兴趣学习 React Native，特别是涉及移动项目时。
- 若你对原生开发经验不足，但想逐步深入或开发简单应用，React Native 是不错的选择。
- 若你已掌握 React，凭借熟悉的概念，使用 React Native 进行移动开发会更轻松。
2. 小型跨职能团队
- 小型初创公司的工程师常需负责从服务器到客户端应用（包括网页、移动应用等）的广泛工作。在这种情况下，React Native 能让工程师在缺乏深入移动开发经验的情况下开发移动应用，且可延续 React 的开发势头。
- 大型组织若想轻松调配工程师参与不同应用或项目，也可考虑使用 React Native。
3. 原生开发经验较少至中等的团队
- 若你或团队在移动开发方面经验有限，但熟悉 React 和 JavaScript，React Native 能让你更快地整合产品。虽然经验无可替代，但不必完全依赖 Swift（iOS）或 Java（Android），可节省时间。
4. 具备深厚原生开发经验的团队
- 部分团队选择 React Native 并非因其降低了移动开发的门槛，而是它有助于规范应用在不同平台（移动和桌面）上的开发模式和习惯。
- 若这不是问题，且团队在移动开发上已有丰富经验和大量投入，则需仔细评估使用 React Native 带来的抽象和模式是否对团队有益。
然而，在考虑使用 React Native 时，还需了解其目前存在的一些局限性：
1. JavaScript 的使用
- 若团队或组织没有专注于 JavaScript 的开发者，或在移动开发方面经验丰富，将工程师转向以 JavaScript 为核心的生态系统可能不太合适。React Native 并非万能解决方案，应权衡利弊，而非盲目跟风。
2. 特定性能需求
- React Native 性能良好，但作为一种抽象技术，可能会成为实现特定性能目标的障碍。例如，若应用的主要目标是渲染 3D 场景，React Native 可能不是最佳选择，其他框架（如 Unity）可能更合适。
3. 高度专业化的应用
- 某些应用类型不适合 React 模式。如增强现实（AR）、图形密集型或其他高度专业化的应用，通常需要大多数网页工程师不具备的特殊库和技能。虽然并非无法实现，但目前 React Native 并未专注于满足这些需求。
4. 内部应用
- 大型公司有时会开发内部应用，以帮助员工更好地完成工作。React Native 适合这类应用，因为它们通常具有相对简单的用户界面，且非移动开发专家的工程师也能快速迭代开发。
最简单的 “Hello World” 示例
下面通过一个基本的 “Hello World” 示例，让你了解 React Native 的实际应用。操作步骤如下：
1. 打开终端，进入你存放 React Native 示例代码的文件夹：
cd ./path-to-your-react-native-sample-folder
- 全局安装
create-react-native-app：
npm install -g create-react-native-app
- 在当前目录创建 React Native 应用：
create-react-native-app .
运行上述命令后，你会在指定目录看到创建的多个文件和相关说明。这些命令与 Create React App 类似，后者专注于网页平台的 React.js 开发。你可在 https://github.com/facebookincubator/create-react-app 了解更多关于 Create React App 的信息。
Create React Native App 工具会安装依赖项、创建模板文件、设置构建流程，并将 Expo React Native 工具包集成到项目中。Expo SDK 扩展了 React Native 的功能，使与硬件技术的交互更轻松。Expo XDE 开发环境则便于管理多个 React Native 项目，以及进行构建和部署。
以下是一个简单的 React Native 组件示例（ App.js ）：
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
people: []
};
}
async componentDidMount() {
const res = await fetch('https://swapi.co/api/people');
const { results } = await res.json();
this.setState(() => {
return {
people: results
};
});
}
render() {
return (
<View style={styles.container}>
<Text style={{ color: '#fcd433', fontSize: 40, padding: 10 }}>
A long time ago, in a Galaxy far, far away...
</Text>
<Text>Here are some cool people:</Text>
{this.state.people.map(p => {
return (
<Text style={{ color: '#fcd433' }} key={p.name}>
{p.name}
</Text>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center'
}
});
在这个示例中，组件在挂载时从 Star Wars API 获取数据，并将其显示在界面上。注意，React Native 已经使用了现代网页 API，如 Flexbox 和 Fetch。
当你对应用进行修改时，打包工具会实时响应并更新运行中的应用。这展示了 React Native 开发的便捷性，相比传统移动开发的编译 - 检查 - 重新编译循环，节省了大量时间。
通过这个简单的示例，你已创建了第一个 React Native 组件和代码，对该技术的工作原理和开发难度有了初步了解。
以下是创建 React Native “Hello World” 应用的流程图：
graph TD;
A[进入指定文件夹] --> B[安装 create-react-native-app];
B --> C[创建 React Native 应用];
C --> D[启动 React Native 打包工具];
D --> E[打开模拟器];
E --> F[修改代码并查看热更新];
在选择是否使用 React Native 时，你可参考以下表格总结的使用场景和局限性：
| 使用场景 | 说明 |
| ---- | ---- |
| 独立开发者 | 学习 React 或进行副业移动项目，缺乏原生开发经验 |
| 小型跨职能团队 | 工程师需负责广泛工作，缺乏深入移动开发经验 |
| 原生开发经验较少至中等的团队 | 熟悉 React 和 JavaScript，想快速整合产品 |
| 具备深厚原生开发经验的团队 | 规范应用在不同平台上的开发模式 |
| 内部应用 | 界面简单，需快速迭代开发 |
| 局限性 | 说明 |
|---|---|
| JavaScript 的使用 | 团队缺乏 JavaScript 开发者或已有丰富移动开发经验 |
| 特定性能需求 | 如渲染 3D 场景，React Native 可能不适合 |
| 高度专业化的应用 | 如 AR、图形密集型应用，需要特殊库和技能 |
React Native：何时使用及入门指南
后续学习资源
在 React 的文档、库生态系统和社区中，你会经常看到 “Learn once, write anywhere”（一次学习，随处编写）这句话。这类似于 Java 社区中流行的 “Write once, run anywhere”（一次编写，到处运行），也是 React 范式的一个标志。正如本章所展示的，你可以学习 React 概念并将其应用于各种平台，从网页到移动应用再到 VR。虽然在新平台上使用 React 时会有特定平台的差异和细微差别，但大部分 React 知识都能轻松迁移，这也是使用 React 如此令人愉悦的原因之一。
如果你想继续深入学习 React Native，有许多资源可供参考：
1. 《React Native in Action》 ：由 Nader Dabit 编写，这本书与你目前所学的内容衔接良好，是 React Native 的优秀入门书籍。你可以运用在之前学习中积累的知识，借助这股势头深入学习使用 React Native 构建移动应用。如果你的团队正在考虑为即将开展的项目使用 React Native，这本书也是很好的参考资料。
2. Create React Native App 项目 ：为新的 React Native 项目提供了绝佳的起点，对于初学者来说也是一个很好的示例应用。它包含了一些用于构建 React Native 应用的预设库和工具，并且允许你 “弹出” 并恢复到默认设置。如果你对 Create React App 或 Create React Native App 感兴趣，可以在线查看相关信息：
- Create React Native App
- Create React App
- React Native 文档
总结
以下是对本章内容的总结：
1. React Native 概述
- React Native 是 React 生态系统中的一项技术，开发者可以使用它编写在 iOS 和 Android 移动设备上运行的 React 应用。
- 它使用 React 核心库创建组件，但使用不同的库来处理在原生平台上渲染应用以及与底层平台（触摸事件、地理位置、相机访问等）的交互。
- React Native 负责在 JavaScript 和底层移动平台之间进行桥接。
- React Native 使用许多与网页 API 相同或相似的 API，如使用 Flexbox 进行布局，使用 Fetch 进行网络请求等。
- 在构建 React Native 应用时，可以混合使用 JavaScript 和原生代码。
2. 开发工具和优势
- React Native 提供了一套强大的开发和编译工具。
- 其热重载开发工具节省了时间，无需每次都等待应用重新编译。
3. 适用场景和局限性
- 使用 React Native 可以降低你或团队进行移动开发的门槛。
- 并非所有类型的移动应用都适合使用 React Native，但对于大多数典型的移动应用来说，它是足够的。
- 要根据团队的情况、项目需求以及 React Native 的局限性，综合评估是否使用该技术。
以下是 React Native 相关资源的表格总结：
| 资源名称 | 说明 | 链接 |
| ---- | ---- | ---- |
| 《React Native in Action》 | 深入学习 React Native 的书籍 | 可在 www.manning.com/books/react-native-in-action 了解更多 |
| Create React Native App | 新 React Native 项目的起点 | https://github.com/react-community/create-react-native-app |
| Create React App | 专注于网页平台 React.js 开发 | https://github.com/facebook/create-react-app |
| React Native 文档 | 官方文档 | https://facebook.github.io/react-native |
总之，React Native 为开发者提供了一种便捷的方式来开发跨平台的移动应用，但在使用时需要根据具体情况进行评估和选择。希望通过本章的学习，你对 React Native 有了更深入的了解，并能在合适的场景中运用这项技术。
以下是学习 React Native 的资源获取流程图：
graph TD;
A[决定深入学习 React Native] --> B[选择学习资源];
B --> C{资源类型};
C -->|书籍| D[阅读《React Native in Action》];
C -->|项目工具| E[使用 Create React Native App];
C -->|文档| F[查看 React Native 文档];
D --> G[深入学习 React Native 知识];
E --> H[实践开发 React Native 应用];
F --> I[了解官方技术细节];
扫一扫
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
