React Native 上手

我就是我 2022-01-20 01:45 195阅读 0赞

\[TOC\]

## 环境安装 ##

> 推荐直接查看[官网][Link 1]，介绍的很详细，嫌门槛高，那就[React Native 中文网][React Native]。

### 开发工具 ###

> **IDE**建议使用[VS Code][]，比较轻量级，插件想装就装，插件当然首选React Native Tools，建议下载好后，搜索安装。
> 
> 安装好VS Code后，可以了解几个常用的快捷键
> 
> > Alt + Shift + F 格式化  
> > Ctrl + \[ 选中内容缩进向左移动  
> > Ctrl + \] 选中内容向右移动  
> > Ctrl + C 复制当前行  
> > Ctrl + V 粘贴复制的内容  
> > Ctrl + X 剪贴当前行  
> > Ctrl + / 行注释  
> > Ctrl + F 查找  
> > Ctrl + H 替换  
> > Alt + Shift + A 块注释  
> > Alt + ↓ / ↑ 向上/向下移动行  
> > Ctrl + K Ctrl + 0 (Ctrl + K + 0) 全局方法折叠  
> > Ctrl + K Ctrl + J (Ctrl + K + J) 全局方法展开  
> > Ctrl + Shift + \[ 当前块折叠  
> > Ctrl + Shift + \] 当前块展开
> 
> **调试**可以使用模拟器，百度搜索可以显示一大堆，建议还是使用系统模拟器，下载Android Studio会自带，有条件的就使用真机吧

## 常用命令 ##

> 开发之前先了解几个常用到的npm命令

npm list -g --depth 0 	//查看已安装的包
    npm i 'name' / npm install 'name'	//安装
    npm i -g 'name'		//升级
    
    Ctrl + M 	//打开模拟器调试选项
    adb shell input keyevent 82	//通过命令行打开模拟器调试选项
    复制代码

### 导入项目 ###

项目下载好后，通过命令行进入目录
    npm install		//安装项目依赖
    npm rm -rf node_modules	//强制删除node_modules文件夹
    npm rm -rf node_modules && npm install	//上两者的结合
    复制代码

### 引入依赖 ###

npm install --save react-native-webview 	//引入webview控件
    react-native link react-native-webview		//关联webview，某些需要原生支持，故需要添加link
    复制代码

## 了解 ##

> 把环境安装好，先按照提示，写个\*\*Hello，World！\*\*练练手
> 
> 建议先把入门基础按照提示比对敲完，这时大致对react语法有个认识
> 
> React基于ES6，那就好了，咱们找个简答的教程[菜鸟教程][Link 2]，赶紧熟悉下
> 
> 啥，你说ES6教程这么简答，那是怕打消你的自信心，来给你个复杂的教程[ECMAScrip 6 入门][ECMAScrip 6]，这个文档可能有点复杂，看不完也别怕，后续咱们可以直接项目了解
> 
> 这个时候，因为对应用还不了解，暂不建议你看官网的进阶指南和使用指南

## 上手 ##

> 如何上手快，当然是跟着项目一起做喽，这里推荐一位大神的[教程][Link 3]，如果视频找不到，建议翻翻教程里的评论，视频教程只有几章，花上一周时间，完全可以跟着视频敲出来。
> 
> 当然，因为视频录制的比较早，可能某些控件已被官方废弃，引入方式发生变化，需要在导入的时候注意，为避免弯路，这里给出对部分已废弃控件的导入方式，见文末。同时，如果原教程的项目源码不能够正常安装，这里给出一份最新代码，可以参考，点[这里][Link 4]，下载运行查看效果就是了，如果不知道怎么安装，请查看上面导入项目介绍。
> 
> 项目中后续会有其他的小demo，有时间会一直更新。

## 跟进 ##

> 如果你跟着教程已经完整的敲了一遍，那么恭喜你，你会发其实具体和原生开发差不多，无非就是控件名称和事件的不一致，坚持做下去就会了解了。
> 
> 这个时候，估计你会对react的其他控件有些好奇，建议把官网上的进阶指南和使用指南完整的看上一遍，再找个简单的项目，上手试试。
> 
> 再项目里会经常遇到各种控件的导入和使用问题，经常性的报错，建议能够耐住性子看下去，一般日志里回有提示。
> 
> 还有控件的link和使用问题，最好不要一上来就去找教程，可以试着到node\_modules里找到该项目引用，一般readme里会有使用介绍，或者看源码暴露出的属性和方法，要么就去到github上找到该库，看看作者的具体介绍，这样能更好的理解控件的用法，以避免拾人牙慧。

## 附 ##

AsyncStorage引入
    npm install @react-native-community/async-storage --save
    react-native link @react-native-community/async-storage
    
    WebView引入
    npm install react-native-webview --save
    react-native link react-native-webview
    
    Navigator引入
    npm install react-native-deprecated-custom-components --save
    
    PropTypes引入
    npm install --save prop-types
    
    TabNavigator引入
    npm install --save react-native-tab-navigator
    复制代码

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Ffacebook.github.io%2Freact-native%2F
[React Native]: https://link.juejin.im?target=https%3A%2F%2Freactnative.cn%2F
[VS Code]: https://link.juejin.im?target=https%3A%2F%2Fcode.visualstudio.com%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.runoob.com%2Fw3cnote%2Fes6-tutorial.html
[ECMAScrip 6]: https://link.juejin.im?target=http%3A%2F%2Fes6.ruanyifeng.com%2F
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fb7430a396767
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fheardown%2FHiRN%2Ftree%2Fmaster