react native入门

Love The Way You Lie 2022-11-17 14:44 152阅读 0赞

### 文章目录 ###

*  前言
 *  一、react native是什么？
 *  二、目录介绍
 *  三、使用Android Studio跑起来
 *  建议

--------------------

# 前言 #

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

--------------------

# 一、react native是什么？ #

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

# 二、目录介绍 #

良好的目录结构有助于今后的开发及维护。首先，让我们看下我的目录结构：  
![在这里插入图片描述][20210410144731657.png_pic_center]

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

*  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会识别并进行一系列编译，等待一会儿后，可以点击运行试试。  
![在这里插入图片描述][20210410145556467.png_pic_center]

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

启动模拟器

![在这里插入图片描述][20210410145817993.png_pic_center]

待启动完成后，运行App  
![在这里插入图片描述][20210410145847590.png_pic_center]

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

# 建议 #

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

[react-native]: https://www.react-native.cn/docs/getting-started
[20210410144731657.png_pic_center]: /images/20221022/515de8fd09c94f55915938ca742e6aab.png
[20210410145556467.png_pic_center]: /images/20221022/7ad82e5ba17e4d90a5d4fab5f5f54b37.png
[20210410145817993.png_pic_center]: /images/20221022/de4764e396f043b9a1c9010a2a1e500c.png
[20210410145847590.png_pic_center]: /images/20221022/19a8aa7c262142c1b092173ac7c54ccb.png