首页 > 文章 > 前端

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

来源：dev.to

时间：2024-12-21 14:25:02 336浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《React Native 入门 (EXPO)：初学者指南》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

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',
  },
});

关键部件：

view：支持 flexbox 布局、样式和触摸处理的容器。
文本：显示文本的组件。
stylesheet：一种设置组件样式的方法。

您可以通过使用 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)} />
    </view>
  );
}

const styles = stylesheet.create({
  container: {
    flex: 1,
    backgroundcolor: '#ffffff',
    alignitems: 'center',
    justifycontent: 'center',
  },
  title: {
    fontsize: 24,
    fontweight: 'bold',
  },
  counter: {
    fontsize: 20,
    marginvertical: 20,
  },
});

解释：

state：我们使用 usestate 钩子创建一个状态来存储计数。
button：button 组件有一个标题和一个 onpress 处理程序，该处理程序会增加计数。

第 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: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.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)} />
    </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,
  },
});