React Native 之 expo-cli使用 (二十四)

expo-cli是用于创建、运行和部署Universal Expo和React Native应用程序的工具。

1. 安装expo-cli

命令行或终端中运行以下命令来全局安装expo-cli:

javascript 复制代码
npm install -g expo-cli  
# 或者使用yarn  
yarn global add expo-cli

//安装完成后,你可以通过运行expo --version来检查expo-cli的版本。

2. 初始化项目

使用expo-cli初始化一个新的React Native项目。在命令行中运行以下命令:

javascript 复制代码
expo init MyAwesomeApp

在初始化过程中,你会被要求选择一个模板。根据你的需要选择一个模板,例如blank(空白模板)用于项目演示、组件预览或个人项目。

3. 启动项目

进入项目目录并启动你的React Native应用:

javascript 复制代码
cd MyAwesomeApp  
expo start

expo-cli会启动一个开发服务器,并提供一个二维码。你可以使用Expo客户端应用扫描这个二维码来在你的设备上预览你的应用。

4. 运行应用

如果你希望直接在模拟器或真实设备上运行你的应用,你可以使用以下命令:

  • 对于Android设备:expo start --android
  • 对于iOS设备(仅限macOS):expo start --ios

项目通常包含一个默认的App.js文件

javascript 复制代码
import React from 'react';  
import { View, Text, Button, Alert } from 'react-native';  
  
const App = () => {  
  const handlePress = () => {  
    Alert.alert('Hello Expo!', '你点击了按钮!');  
  };  
  
  return (  
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>  
      <Text>欢迎使用Expo和React Native!</Text>  
      <Button title="点击我" onPress={handlePress} />  
    </View>  
  );  
};  
  
export default App;
相关推荐
蓝婴天使2 小时前
基于 React + Go + PostgreSQL + Redis 的管理系统开发框架
react.js·postgresql·golang
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead4 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
今天头发还在吗4 小时前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
需要兼职养活自己9 小时前
react【portals】与vue3【<Teleport>】
前端·react.js
用户47949283569159 小时前
React 19.2 重磅更新:终于解决 useEffect 依赖数组难题
前端·react.js
@PHARAOH9 小时前
HOW - prefetch 二级页面实践
前端·javascript·react.js
前端OnTheRun9 小时前
React18学习笔记(六) React中的类组件,极简的状态管理工具zustand,React中的Typescript
react.js·组件·
打小就很皮...10 小时前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
HHHHHY11 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js