ReactNative 踩坑(一):搭建环境

871 阅读2分钟

最近要搞RN,就先去初始化1个项目。这里官网推荐2种方式:

1、官方react-native-cli搭建项目

2、expo-cli 创建项目

初始化项目

这里官方推荐用expo,说这个才是未来主流,对于web前端开发同学来说,这个不需要安装客户端环境,甚是方便

于是按照expo官方教程,执行初始化命令

npx create-expo-app my-expo-app

项目初始化后,自动npm install安装依赖,但是可能因为网络原因,没安装成功

这里选择手动 用yarn安装依赖

安装完后,启动web

yarn web

报了错

CommandError: It looks like you're trying to use web support but don't have the required dependencies installed.

Please install react-native-web@~0.18.10, react-dom@18.2.0, @expo/webpack-config@^18.0.1 by running:

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo config.

这里需要安装 rn-web 所需要的依赖

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

安装完后,启动web

yarn web

image.png

项目跑起来了,到这里项目就算初始化好了

支持ts

这里如果读者按照上面的流程走完,肯定会有细心的网友会发现,怎么是js项目啊,都3202年了,为啥不是ts项目

于是经过我查阅 expo 的文档,找到了解决办法,我们在初始化项目的命令后面加上 --template 参数,就可以选择一些初始化模板

npx create-expo-app my-expo-ts3 --template

这里给了4个选项

image.png

分别是:

  1. 空项目(不带--template时默认的模板,也就是js版空项目
  2. ts版的空项目
  3. 带导航的ts版空项目
  4. 有Native代码的空项目

这里我们用第3个就好了

安装好依赖后,直接启动起来了,都没有之前rn-web那个依赖的报错

image.png