RN学习笔记

一、安装依赖

        1、需要安装 node，Python，JDK
        直接下载 .msi 文件（安装包）自动开始安装，我是把后 2 个直接装到 C 盘，后面发现并没有关于这 2 个的环境变量的路径配置，node安装好后直接按照 RN官网 流程配置命令行工具。

        2、配置命令行工具：
        npm i -g react-native-cli    安装 react-native 脚手架（这一步使用 yarn install -g  react-native-cli ，是没成功的，暂不清楚原因），如下显示是成功的结果。
    

二、搭建 Android 开发环境

    1、下载 Android Studio （这是中文社区连接，下文简称 AS），并安装。

    2、通过 AS 下载 Android SDK，然后配置环境变量，按照官网的流程走就行
        （该 SDK 下载完成后可以不用 AS 开发，我只是用 AS 来下载所需的 SDK 的，配置好环境变量后就能使用到那些 SDK 了，开发使用的是 VS code）。   

    3、创建新项目    react-native init myApp    创建一个项目名为 myApp 的项目，此时在该目录下有如下文件
    

三、准备 Android 设备，我使用的是安卓真机，自己的手机 OPPO Find X

    有 2 中调试方式：1.使用 USB 连接；2.使用 WiFi 连接。

    因为官方教程是使用的 USB 连接到电脑，所以我先用数据线连接手机和电脑，按照官方教程在手机上进行了操作，然后进行第四步，中间有些曲折，但是成功了。

    使用 WiFi：我是根据这篇博客上的说明做的，中间还是有点曲折，跟文中似乎有点不完全一样，但是最后还是成功了。
    注：该博客最后说的连接电脑的 IP 地址和端口号，端口号就是 8081 就可以。

四、真机同步，编译并运行 React Native 应用

    cd 项目名
    react-native run-android

最后附上一张我通过 WiFi 真机同步所看到的界面

五、期间遇到的报错

    1、adb.exe: unknown command advices
        这是在使用命令 adb devices 查看电脑所连接的设备时报的错，解决方法见此博客，以下是我成功解决该问题的截图

    对于以下情况，一直offline的解决方法也是同上图的步骤和逻辑，也可见此文档

    2、红屏报错，解决方法：见此博客

    3、红屏报错如下，解决方法：见此博客

    4、黄屏警告：Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window)，解决方法是，把浏览器上的debugger标签页放到最前，页面不要最小化就行。

 

六、其他

    1、[React Native] VS Code 调用模拟器(虚拟机/仿真器)开发调试

    2、使用 iconfont 文字图标，导入 iconfont.ttf 文件到下图位置，重新 react-native run-android 安装就好
        注：我曾在网上找教程并按照其思路做过一些配置，但最后都修改回初始配置了，也不知道那些操作是否起了作用。

使用：

<Text style={styles.questionIcon}>&#xe610;</Text>
// 样式
questionIcon: {
  fontFamily: 'iconfont',
  fontSize: 18,
  marginRight: 5,
},