关于React-native的介绍以及环境搭建

落日映苍穹つ 2023-06-10 15:28 24阅读 0赞

## React-Native介绍（后面内容的RN就是指react-native） ##

由facebook公司推出的，基于react，能开发原生app
    原理：
    1.  利用react框架写好js代码
    2.  利用python、C  把我们的js代码，翻译成java代码
    3.  利用android-SDK把我们的java源代码打包编译成apk
    4.  可以运行在模拟器上
        
        只要搭建好环境，以上内容都是android-sdk帮我们完成

## RN环境搭建（环境建议装在c盘） ##

开始需要装两个全局包 
            cnpm i -g yarn react-native-cli
    1.  安装java环境
        *   下载jdk8
                            注意：jdk包括了jdk和jre
        *   在系统环境变量里面新建一个JAVA_HOME的系统变量，值为jdk的路径C:\Program Files\Java\jdk1.8.0_144
        *   在path里新增两个值%JAVA_HOME%\bin，%JAVA_HOME%\jre\bin
        *   然后cmd运行java -version和javac，如果出现版本号或者没说找不到，就代表ok了
    2.  安装python环境
        *   去360软件管家里面下载
        *   安装时候记得勾选安装到path中，英文好像叫 allow add xxx to path，它会自动添加到系统环境变量
    3.  搭建android环境
                    下载android-sdk，将Android丢到c盘下
    4.  安装模拟器
            我推荐用夜神模拟器

## RN脚手架生成项目 ##

创建新文件夹  
            打开命令窗口
                react-native init projectname
    运行项目流程：
        1.  在模拟器的开发者模式中，打开usb调试（打开开发者模式需要连续点击版本号）
        2.  电脑连接模拟器
            adb connect 127.0.0.1:62001
            通过adb devices看是否连接上模拟器
        3.  找到android->gradle->wrapper->gradle-wrapper.properties修改distributionUrl=file:///C:/Android/gradle-2.14.1-all.zip，不改也行，会自动用网上的资源
        4.  切换到项目根目录
                通过react-native run-android
        5.  菜单键 - Dev Settings - Debug server host xxx - 设置内网的ip，node的端口号8081，
            关掉原先node服务，再重新打开react-native run-android

更多专业前端知识，请上 **【猿2048】www.mk2048.com**