使用React Native Web构建适合移动设备的Web应用

介绍 (Introduction)

Over the years, building web applications that are mobile friendly has become easier with the advent of media queries and the introduction of service workers. Using media queries, we could make web applications that different shapes when viewed on mobile devices. Service workers, with their powerful features, present web applications with powers only native applications have been known to possess, like push notifications and background sync, among other features.

多年来，随着媒体查询的出现和服务人员的引入，构建移动友好的Web应用程序变得更加容易。 使用媒体查询，我们可以使Web应用程序在移动设备上查看时具有不同的形状。 服务工作者以其强大的功能为Web应用程序提供了仅已知本机应用程序具有的功能，例如推送通知和后台同步以及其他功能。

React Native is a multi-platform solution developed by Facebook that lets you build mobile apps using JavaScript. These mobile apps are considered multi-platform because they’re written once and deployed across many platforms, like Android, iOS and the web.

React Native是Facebook开发的一种多平台解决方案，可让您使用JavaScript构建移动应用程序。 这些移动应用程序被认为是多平台的，因为它们只编写一次并部署在许多平台上，例如Android，iOS和Web。

In this tutorial you’ll build an application that displays user information from the [Random User API](https://randomuser.me/ using React Native components like ScrollView, Text and Image. The app will run both on the web and mobile using the React Native Web library, which lets you use React Native components and APIs in web applications.

在本教程中，您将构建一个应用程序，使用React Native组件(例如ScrollView，Text和Image)显示[Random User API]( https://randomuser.me/)中的用户信息。该应用程序将同时在网络和移动设备上运行使用React Native Web库，该库使您可以在Web应用程序中使用React Native组件和API。

先决条件 (Prerequisites)

To complete this tutorial, you’ll need:

要完成本教程，您需要：

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment

  Node.js的本地开发环境。 遵循如何安装Node.js和创建本地开发环境

• Some familiarity with JavaScript. You can look at the How To Code in JavaScript series to learn more.

  熟悉JavaScript。 您可以查看“ 如何使用JavaScript编码”系列以了解更多信息。

• Familiarity with React. You can follow the official React tutorial here to get up to speed with React.

  熟悉React。 您可以在此处遵循官方的React教程来快速了解React。

步骤1 –建立专案 (Step 1 – Creating the Project)

Before we get started, we’ll need to set up the project and install project dependencies. We’ll be making use of Create React App to bootstrap our application. We’re using Create React App because it can be configured to alias React Native. We’ll be installing polyfills for some of the latest JavaScript APIs like Promise, Array.from, etc., as the transpiler doesn’t provide those.

在开始之前，我们需要设置项目并安装项目依赖项。 我们将使用Create React App引导我们的应用程序。 我们正在使用Create React App，因为它可以配置为别名React Native。 我们将为某些最新JavaScript API(例如Promise ， Array.from等)安装polyfills，因为transpiler不提供这些功能。

To bootstrap your application using Create React App, run the following command:

要使用Create React App引导您的应用程序，请运行以下命令：

• npx create-react-app random-people
  npx create-react-app随机人

Run the following command to install the project’s development dependencies. If you’re using Yarn, use this command:

运行以下命令以安装项目的开发依赖项。 如果您使用的是Yarn，请使用以下命令：

• yarn add --dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo
  纱线添加--dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo

If you’re using npm, use this command:

如果您使用npm ，请使用以下命令：

• npm install --save-dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo
  npm install --save-dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo

The babel-plugin-module-resolver is a plugin that resolves your project modules when compiling with Babel. We’ll use this package to alias react-native to react-native-web when setting up the project config.

babel-plugin-module-resolver是一个插件，可在使用Babel进行编译时解析您的项目模块。 设置项目配置时，我们将使用此包将react-native别名为react-native-web。

To build and run our application, we’ll be using Expo. Expo is an open-source toolchain built around React Native for building Android and iOS applications. It provides access to the system’s functionality like the Camera, Storage, etc.

为了构建和运行我们的应用程序，我们将使用Expo 。 Expo是一个围绕React Native构建的开源工具链，用于构建Android和iOS应用程序。 它提供对系统功能(如“相机”，“存储”等)的访问。

Install the expo-cli module by running the following command if you’re using Yarn:

如果使用的是Yarn，请通过运行以下命令来安装expo-cli模块：

• yarn global add expo-cli
  全球纱线展

Or, if using npm, use this command:

或者，如果使用npm ，请使用以下命令：

• npm i g expo-cli
  npm ig expo-cli

The next step is to install expo locally, alongside React Native and React Native Web. Run the command that follows to install the packages using Yarn:

下一步是在本地安装expo，以及React Native和React Native Web。 运行以下命令以使用Yarn安装软件包：

• yarn add expo react-native react-native-web react-art
  纱线添加博览会React本机React本机网React艺术

Or, for npm:

或者，对于npm ：

• npm i expo react-native react-native-web react-art
  npm i expo react-native react-native-web react-art

After downloading the packages needed to run and build the application, the next step is to set up the configuration files. Create a file called .babelrc in the root of your project:

下载了运行和构建应用程序所需的软件包后，下一步是设置配置文件。 在项目的根目录中创建一个名为.babelrc的文件：

• nano .bablerc
  纳米.bablerc

Add the following code to the file to configure the transpilers your project will use:

将以下代码添加到文件中，以配置项目将使用的编译器：

.babelrc

.babelrc

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {