React Native 入门 (EXPO)：初学者指南

百变鹏仔 4天前 #JavaScript

文章标签初学者

react native 已成为构建移动应用程序最流行的框架之一，使开发人员能够使用 javascript 和 react 为 ios 和 android 创建跨平台应用程序。 expo 通过提供一组工具和服务来简化 react native 开发，帮助您快速构建原型、构建和部署 react native 应用程序，而无需深入研究本机代码。

在本初学者指南中，我们将引导您通过 expo 设置 react native、编写一些基本组件以及部署您的应用程序。让我们开始吧！

什么是世博会？

expo是通用react应用程序的框架和平台。它是一个围绕 react native 构建的开源工具链，提供了一组丰富的开箱即用功能，例如访问摄像头、位置服务和其他本机功能。借助 expo，您可以避免本机代码的复杂性，同时仍然构建功能强大、功能丰富的移动应用程序。

为什么是世博会？

快速设置：expo 会为您处理大部分配置。
跨平台开发：编写一个代码库并在 android 和 ios 上运行。
无需本机设置：您可以使用 expo go 应用程序在设备或模拟器上运行您的应用程序，无需安装 android studio 或 xcode。
预构建模块：expo 包含各种 api 来访问本机设备功能。

先决条件

在我们开始之前，请确保您已安装以下软件：

node.js（v14 或更高版本）：下载 node.js
expo cli：expo 的命令行界面。
expo go：从 app store (ios) 或 google play (android) 下载 expo go 应用程序，以便在您的移动设备上进行测试。

要安装 expo cli，请运行以下命令：

npm install --global expo-cli

现在，让我们使用 expo 创建我们的第一个 react native 应用程序。

第1步：创建一个新的expo项目

首先，打开终端并导航到要创建新项目的目录。运行以下命令：

expo init myfirstapp

系统将提示您选择一个模板。为本指南选择“空白”。设置项目后，导航到项目文件夹：

cd myfirstapp

要启动您的应用程序，请运行以下命令：

expo start

这将在您的浏览器中打开 expo devtools。您现在可以使用手机上的 expo go 应用程序扫描二维码，也可以在 ios/android 模拟器上运行该应用程序。

第 2 步：基本应用程序结构

在app.js文件中，您会发现expo已经提供的基本结构。让我们修改它以显示欢迎消息。

默认 app.js

import react from 'react';import { stylesheet, text, view } from 'react-native';export default function app() {  return (    <view style="{styles.container}"><text style="{styles.title}">welcome to my first react native app!</text></view>  );}const styles = stylesheet.create({  container: {    flex: 1,    backgroundcolor: '#ffffff',    alignitems: 'center',    justifycontent: 'center',  },  title: {    fontsize: 24,    fontweight: 'bold',  },});

关键部件：

您可以通过使用 expo go 应用程序扫描二维码在您的设备上看到此代码。

第 3 步：添加按钮和状态

让我们通过添加一个递增计数器的按钮来使我们的应用程序更具交互性。

修改app.js以添加按钮

import react, { usestate } from 'react';import { stylesheet, text, view, button } from 'react-native';export default function app() {  const [count, setcount] = usestate(0);  return (    <view style="{styles.container}"><text style="{styles.title}">welcome to my first react native app!</text><text style="{styles.counter}">count: {count}</text><button title="{'increment'}" onpress="{()"> setcount(count + 1)} /&gt;    </button></view>  );}const styles = stylesheet.create({  container: {    flex: 1,    backgroundcolor: '#ffffff',    alignitems: 'center',    justifycontent: 'center',  },  title: {    fontsize: 24,    fontweight: 'bold',  },  counter: {    fontsize: 20,    marginvertical: 20,  },});

解释：

第 4 步：设计您的应用程序

react native 使用 stylesheet 来设置组件的样式。它与 css 类似，但在命名约定和结构上有一些差异。

以下是增强按钮和文本外观的方法：

const styles = stylesheet.create({  container: {    flex: 1,    backgroundcolor: '#f0f8ff',    alignitems: 'center',    justifycontent: 'center',  },  title: {    fontsize: 24,    fontweight: 'bold',    color: '#333333',  },  counter: {    fontsize: 20,    color: '#008080',    marginvertical: 20,  },  button: {    margintop: 10,    backgroundcolor: '#008080',    padding: 10,    borderradius: 5,  },});

第 5 步：添加图像

expo 提供了一个很棒的库，名为 expo-image 来处理图像。您可以使用本地图像或远程 url。

首先，将图像添加到您的项目中。我们在此示例中使用在线图像。

添加图像

import { image } from 'react-native';export default function app() {  const [count, setcount] = usestate(0);  return (    <view style="{styles.container}"><image source="{{" uri: style="{styles.image}"></image><text style="{styles.title}">welcome to my first react native app!</text><text style="{styles.counter}">count: {count}</text><button title="{'increment'}" onpress="{()"> setcount(count + 1)} /&gt;    </button></view>  );}const styles = stylesheet.create({  container: {    flex: 1,    backgroundcolor: '#f0f8ff',    alignitems: 'center',    justifycontent: 'center',  },  image: {    width: 100,    height: 100,    marginbottom: 20,  },  title: {    fontsize: 24,    fontweight: 'bold',    color: '#333333',  },  counter: {    fontsize: 20,    color: '#008080',    marginvertical: 20,  },});

第 6 步：在设备上测试

您可以通过两种方式测试您的应用：

使用 expo go：在您的设备上打开 expo go 应用程序，然后从 expo 开发者工具中扫描二维码。
模拟器/模拟器：如果您已设置 xcode 或 android studio，则可以在虚拟设备上运行应用程序。

第 7 步：构建和发布

一旦您准备好部署，expo 就可以轻松构建您的应用程序。

构建应用程序：

   expo build

这将生成 apk (android) 和 ipa (ios) 文件。

发布应用程序：如果您不构建独立应用程序，但想通过 expo 的服务器共享您的项目，请运行：

   expo publish

这将为您的应用创建一个可共享的链接！

结论

在本指南中，我们介绍了使用 expo 开始使用 react native 的基础知识。我们创建了一个简单的应用程序，添加了按钮的交互性，设计了它的样式，甚至添加了图像。 expo 让您可以轻松开始构建强大的移动应用程序，而无需处理本机环境的复杂性。

随着您对 react native 越来越熟悉，您可以开始探索导航、状态管理和自定义组件等高级功能。

保持联系

感谢您关注本 react native (expo) 初学者指南！如果您想了解更多内容或与我联系，请随时关注我：

编码愉快，我期待与您联系！

文章推荐