React Native开发之——创建RN项目的几种方式

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

本文介绍创建React Native项目的几种方式

  • npx
  • expo
  • gluestack

二 React Native项目的几种方式

2.1 npx-官网示例

项目创建

1
npx react-native@latest init AwesomeProject

说明：

  • 支持：android、ios
  • 创建完的项目，有android、ios
  • 模拟器运行支持

项目运行

1
2
3
4
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

2.2 Expo

项目创建

1
npx create-expo-app expo-sample

说明：

  • 支持：android、ios、web
  • 创建完的项目，没有android、ios、web等model

安装Expo客户端

下载地址：https://expo.dev/client

运行或生成android、ios、web

1-web

安装web依赖

1
npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

运行

1
npm run web

2-android
安装依赖

1
yarn

编译并生成android目录，并运行(模拟器运行不支持)

1
npx expo run:android

运行

1
2
npm run android
npm expo start

3-ios

编译并生成ios目录，并运行

1
npx expo run:ios

2.3 gluestack-ui

项目创建

1
npm create gluestack

说明：

  • 执行指令后，选择Web app、Mobile app(Expo+gluestack-ui)、Mobile app(React Native+gluestack-ui)、Universal app并确认
  • Expo创建完的项目，没有android、ios等目录

项目运行

expo方式

1
npx expo run:ios

yarn方式

1
yarn android

三 参考

  • React Native中文网-搭建开发环境
  • Expo-Docs
  • gluestack-ui