react native入门

---

前言

上个月公司为了上报率，要求使用新技术，在许多从未只是听过，没用过的技术里，果断选择了react native,坑还是很多的，但是现在项目还是开发的差不多了，所以在这个星期六，写一篇react native的踩坑日记，也方便自己日后巩固

---

一、react native是什么？

在这里先留下文档，有兴趣的可以看一看文档，更专业react-native中文网
至于为什么让一个从未接触过react的小前端选择react native呢，主要是因为rn能帮助前端开发者使用熟悉的方式开发出一款接近原生体验的App，原来都是用uni来开发，但是上线之后效果不是那么好，还有就是很多优化的地方很难处理。
至于怎么安装使用，还请移步官网

二、目录介绍

良好的目录结构有助于今后的开发及维护。首先，让我们看下我的目录结构：

上面的目录结构说明如下，重要的有：

• android/ android 原生代码（使用 android studio 要打开这个目录，如果直接打开父目录报错）
• ios/ ios 原生代码（使用 xcode 打开这个目录，如果直接打开父目录报错）
• index.js 打包 app 时进入 react native（js 部分） 的入口文件（0.49 以后安卓、ios 共用一个入口文件）
• App.js 可以理解为 react native（js 部分） 代码部分的入口文件，比如整个项目的路由在这里导入

上面是最重要的四个目录/文件，其他说明如下：

• app.json 项目说明，主要给原生 app 打包用
• package.json 项目依赖包配置文件
• node_modules 依赖包安装目录
  其他配置文件暂时无需改动，在此不做说明

三、使用Android Studio跑起来

在这里，你可以使用真机也可以直接使用Android Studio自带的模拟器来运行运用，这里以模拟器为准。

File–> Open–>选择myApp下的android目录

此时，IDE会识别并进行一系列编译，等待一会儿后，可以点击运行试试。

注意：对于第一次使用的我来说，这里遇到个问题：Cannot find AVD system path. Please define ANDROID_SDK_ROOT, 原因是Android Studio自带的模拟器镜相并未安装，所以先把它delete，再通过Tools--> AVD Manager-->Create Virtual Device来新增设备，这里选择的是pixel 3a,一路Next并安装成功后Finished，

启动模拟器

待启动完成后，运行App

注意：首次运行可能会红屏报错，但是遇到问题不要慌，以后在用react native开发的时候会经常出现，比如语法错误等等，基本都是有解决方法的
此时需要先npx react-native run-android进行项目编译
再次运行时，基本就没有什么问题了，试着动手改一下你的demo吧

建议

其实想要学习一个新技术，不能只阅读博客，因为这是别人学习后的理解，还是要学习官方文档，然后通过实践，不断踩坑，这样才能学到专业知识，所以本篇文章就不贴出自己踩得坑了，如果有初学者遇到坑，可以下方留言