如何使用 Express.js 和 React Native 构建移动应用-JavaScript中文网-JavaScript教程资源分享门户

介绍

移动应用已经成为了现代生活不可或缺的一部分。为了提供更好的用户体验，更多的企业开始选择使用 React Native 来构建他们的移动应用。React Native 是一个由 Facebook 开发的 JavaScript 框架，可以让开发者使用相同的代码在 iOS 和 Android 平台上构建原生应用。

但是，在构建移动应用时，除了前端部分之外，还需要考虑后端部分。Express.js 是一个流行的 Node.js Web 框架，可以帮助我们快速构建和部署 Web 服务器。

在本篇文章中，我们将介绍如何使用 Express.js 和 React Native 来构建一个简单的移动应用，并将详细介绍其实现过程。本篇文章的内容适用于那些已经有一定前端和后端基础的开发人员。

环境设置

在开始之前，我们需要安装一些必要的工具和软件，包括 Node.js、npm、React Native CLI 和 Expo CLI。

安装 Node.js 和 npm Node.js 是运行 JavaScript 代码的平台，npm 是 Node.js 的包管理器。这两个工具是搭建我们的项目所必须的。

在官网上下载并安装 Node.js 和 npm，安装完成后，可以通过以下命令检查是否成功安装：
```
node -v
npm -v
```
安装 React Native CLI React Native CLI 是一个命令行工具，用于创建和管理 React Native 项目。

使用 npm 安装 React Native CLI：
```
npm install -g react-native-cli
```
安装 Expo CLI Expo CLI 是一个用于构建和管理 React Native 项目的工具。

使用 npm 安装 Expo CLI：
```
npm install -g expo-cli
```

创建 Express.js 应用

首先，我们需要创建一个 Express.js 应用来提供后端服务。

安装 Express.js 使用 npm 安装最新版本的 Express.js：
```
npm install express --save
```
创建 index.js 文件在项目根目录下创建一个名为 index.js 的文件，用于编写后端服务的代码。
```
const express = require('express');
const app = express();

// 设置端口号并启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```
上面的代码使用 Express.js 创建了一个新的应用，并监听在 3000 端口。启动应用后，可以在浏览器中访问 http://localhost:3000，可以看到一个 “Cannot GET /” 的错误信息，这是因为我们还没有设置路由和中间件。

添加路由和中间件

为了提供更加完整的服务，我们需要添加一些路由和中间件。

添加路由在 index.js 文件中添加一个路由：
```
// 返回 JSON 数据
app.get('/api/data', (req, res) => {
  const data = { message: 'Hello, World!' };
  res.json(data);
});
```
上面的代码添加了一个 /api/data 的路由，当我们在浏览器中访问 http://localhost:3000/api/data 时，会返回一个 JSON 对象 { message: 'Hello, World!' }。
添加中间件在 index.js 文件中添加一个中间件：
```
// 设置 CORS（跨域资源共享）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});
```
上面的代码设置了 CORS（跨域资源共享），这是由于在移动应用中，我们需要从不同的域名请求数据，而浏览器会默认阻止这些请求。使用 CORS 可以解决这个问题。

创建 React Native 应用

在这一步，我们将创建一个新的 React Native 应用。

使用 Expo CLI 创建应用在终端中输入以下命令：
```
expo init my-app
```
Expo 会提示我们选择一个模板，选择“blank”即可。
启动应用进入项目目录，输入以下命令启动应用：
```
cd my-app
npm start
```
Expo 会打开一个开发者工具窗口，我们可以在浏览器中看到一个二维码。使用 Expo 应用程序扫描该二维码即可运行应用。

编写前端代码打开 App.js 文件，修改代码如下：

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [data, setData] = useState({});

  const fetchData = async () => {
    const response = await fetch('http://localhost:3000/api/data');
    const json = await response.json();
    setData(json);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View>
      <Text>{data.message}</Text>
    </View>
  );
}

上面的代码使用 useState 和 useEffect 钩子来呈现数据。fetchData 函数使用 fetch API 从 Express.js 服务器获取数据，并将其存储在 state 中。

注意：在模拟器或真实设备上测试应用程序时，需要将“localhost”替换为您电脑的 IP 地址。

总结

在本文中，我们介绍了使用 Express.js 和 React Native 构建移动应用的过程。通过本文的学习，您可以了解到如何使用 Express.js 来创建后端服务，并通过 React Native 从服务器获取数据。这是一个非常有用的技能，可以帮助开发人员构建更加高效和可扩展的移动应用。

示例代码：

index.js：https://codepen.io/Lunarata/pen/yLONOyb
App.js：https://codepen.io/Lunarata/pen/BaGGMQZ

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652c4c0e7d4982a6ebe1d7ab