一步一步开发安卓下的react-native应用系列之环境搭建篇

news/2024/6/29 3:11:14 标签: java, ruby, git

        本文基于win7 64位系统进行搭建,32位的话下载各安装文件时选择对应的32位安装包即可。RN的搭建还是挺麻烦的,需要准备的东西很多,而且有很多坑,本文就一一来说,希望能让大家少走点弯路。

1:nodejs
        react-native需要启动js服务器,所以nodejs环境是必不可少的,nodejs环境搭建相对来说比较简单。
        a)根据你是32位系统还是64位系统选择不同的安装文件(不知道的话在“我的电脑”上点右键,然后点属性,在系统类型这一栏即可看到),我这里下载的是64位的msi文件,下载后直接安装。安装成功后,会在开始任务菜单生成一个nodejs命令工具(Node.js command prompt),我们运行这个工具,然后输入node -v,正确的话会输出版本号。

node -v
v6.4.0

        b)设置环境变量,在系统变量这一栏,点新建,在变量名里输入NODE_PATH,在变量值里输入C:\Program Files\nodejs\node_global\node_modules,然后点确定即可。如果你不改默认安装路径的话,64位安装文件就照这个写,否则你就按照你实际的NODEJS安装路径修改。
        c)修改PATH系统变量,在最后面追加;C:\Program Files\nodejs\;第一个分号根据情况,如果最后面已经有个分号,你就不需要加了,同样此路径需要根据你实际nodejs安装路径进行修改。添加这个环境变量的目的是为了我们打开普通的命令提示行也能运行node命令,就不需要打开专属的nodejs命令工具了。
2:Ruby
        下载Ruby并安装,修改系统变量PATH,在最后追加;C:\Ruby23-x64\bin;同理根据你实际安装路径修改
3:Python
        下载Python并安装,修改系统变量PATH,在最后追加;C:\Python27;同理根据你实际安装路径修改
4:git
        下载git并安装,修改系统变量PATH,在最后追加;C:\Program Files\Git\cmd;同理根据你实际安装路径修改
5:JDK
        这个网上有一大堆的安装教程,下载64位JDK可执行文件并安装,然后设置环境变量,在系统变量这一栏点新建,变量名里输入JAVA_HOME,变量值里输入C:Program Files\Java\jdk1.8.0_121(同理根据你实际安装路径修改)。修改PATH变量,在最后面追加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;设置成功后打开命令行输入java -version测试下:

java -version
java version "1.8.0_121"

6:Android SDK

        a)下载android-sdk压缩文件,随便解压到哪个目录,这里我解压到D:\JDKS目录下,然后设置环境变量,在系统变量这一栏点新建,变量名里输入ANDROID_HOME,变量值里输入D:\JDKSandroid-sdk_r24.4.1-windows\android-sdk-windows(同理根据你实际安装路径修改)。修改PATH变量,在最后面追加;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;设置完毕后,在命令提示行输入adb确认下:

adb
Android Debug Bridge version 1.0.36
...

        b)双击打开SDK Manager.exe文件,然后下载必须的开发依赖包。
            b-1)在tools这个目录下,勾选Android SDK Tools,Android SDK Platform-tools,Android SDK Build-tools(这里版本我选择的是24,请一定记住这个版本,后续要用到)。
            b-2)在Android 6.0(API 23)目录下,记住23这个版本号,后面要用,建议不要选Android 6.0以上系统比如7,因为对新功能支持的设备实在少的可怜,完全没必要。在该目录下勾选SDK Platform,Intel x86 Atom_64 System Image,Intel x86 Atom System Image这3个包。如果你是用真机来测试,后面两个安装包也可以不安装
            b-3)在Extras目录下,勾选Android Support Repoistory,Google Repoistory,Android Auto Api Simulators,Google USB Driver这3个包(如果电脑无法识别你手机,google USB驱动可能就很重要,所以我们下载备用)
            b-4)基于已知的原因,你很可能会下载失败,你有2个办法来解决。第一上网找下免费翻墙软件,比如蓝灯,第二,可以在菜单栏的tools这一栏里点选项,HTTP Proxy Server里输入mirrors.neusoft.edu.cn,在HTTP Proxy Port里输入80,然后在勾选下面的Force https://... sources to be fetched using http://...这一行。
设置代理

7:安装react-native
        以管理员身份运行命令提示行,然后在命令行输入npm install -g react-native-cli。完成后在命令行运行react-native -v测试下:

react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

8:Android Studio,可选
        如果你有安卓或者JAVA开发经验,你就装一个,没有的话你装了也不会用,所以看情况而定。
至此,你的环境算搭建完毕,你可以先坐下来喝杯咖啡提提神,准备后续的工作。


这里是分界线

由于我们采用真机测试,所以需要开启USB调试模式:
        1:打开你的手机,点击系统设置,打开全部设置,看有没有开发者选项这一栏,如果有,就点击进去,将在USB 调试勾选上。如果没有开发者选项这一栏,那就点击关于手机,在版本号上连续单击个几次,就会打开开发者选项,然后跟前面一样设置。这里由于机型,系统不一样,打开USB模式可能有稍微不同,请自行百度就好。
        2:开启USB之后,用数据线将你的手机连上电脑,然后在命令行里输入:adb devices

adb device
List of devices attached
JVNNJVTKCILRZPWW        device

如果出现类似类似于上述的文字,那么恭喜你,你可以很NICE的开始编写你的RN代码了。
如果没有,很不幸,比如如下,可能要需要费点功夫那解决这个问题了。

adb devices
List of devices attached
这里啥也没有,气死你哈哈哈

            a)如果数据线连接后,电脑没有任何提示,那么很大可能你的数据线是坏的(虽然可以充电),你需要换一跟数据线(比如原装的),根据我的经验,短的数据线比长的数据线不容易坏
            b)电脑有提醒找到设备,但是无法识别,打开设备管理器,找到显示黄色感叹号的设备,请按照如下步骤解决
                b-1)卸掉重新安装驱动程序,还不行就执行b-2
                b-2)在黄色感叹号上点右键->选择升级驱动程序->浏览计算机以查找驱动程序软件->从计算机的设备驱动列表中选择->选择所有设备->下一步->从磁盘安装->点浏览,找到在第6步中你安装的Android SDK目录,依次选择extras->google->usb_driver->android_winusb.inf,然后点确定,忽略不兼容的警告等提醒,一路安装即可
                b-3)正常情况下你的USB设备应该就能识别了,如果还有些煞笔设备,比如华为手机,可能还是没法识别,你需要打开工程模式,在拨号键盘上输入##2846579##输入完毕后将会自动打开工程模式,在后台设置里找到USB端口模式,将USB端口模式改成google 模式。
            c)在你的手机通知栏信息里,将USB连接选项改成相机模式。

以上几个方法,应该能解决90%以上找不到设备的问题。如果你还没有解决或者你用别的办法解决了,请告诉我下,我补上去,谢谢!


设置npm淘宝镜像,众所周知的原因,呵呵,在命令行里运行

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist


以上就是环境搭建篇,希望按照上述步骤,你能顺利搭建好你的开发环境,下面就小试牛刀,开始开发你激动人心的第一个RN应用吧。


http://www.niftyadmin.cn/n/963516.html

相关文章

陈松松:掌握视频营销这一招,快速超过竞争对手

每个视频,都是你的金牌业务员这是我写的第11篇视频营销原创文章其实很多人在视频营销方面遇到了问题,还真不是技巧方面的问题!是思维方面出了问题。因为往往技巧都很简单,一点就破,但同样的方法、技巧,有的…

大型网站架构设计及技术分析(一)

一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富&#…

VintaSoft PDF插件VintaSoftPDF.NET Plug-in更新至v5.4,创建PDF可视化工具

2019独角兽企业重金招聘Python工程师标准>>> VintaSoftPDF.NET Plug-in是一个完全的.NET组件,可用于查看,创建以及编辑PDF文档。该程序库还可用于显示,渲染,创建,转化,注释,打印&…

大型网站架构设计及技术分析(二)

随着中国大型IT企业信息化速度的加快,大部分应用的数据量和访问量都急剧增加,大型企业网站正面临性能和高数据访问量的压力,而且对存储、安全以及信息检索等等方面都提出了更高的要求。本文中,我想通过几个国外大型IT企业及网站的…

深入剖析ERP实施失败率高成功率低的原因

昨天在QQ群展开一个历时一天的大讨论,讨论的是主题是影响ERP实施成功率的原因到底是哪些?没想到这个主题异常受关注,观点鲜明针锋相对,问题剖析真实的一针见血都是现实问题。软件公司、企业信息部门,大家在没有利益牵扯…

mysql时间和时间戳互转

mysql时间和时间戳互转转载于:https://www.cnblogs.com/boluoboluo/p/6698015.html

C#设计模式编程之抽象工厂模式新解

概述 在软件系统中,经常面临着“一系列相互依赖的对象”的创建工作;同时由于需求的变化,往往存在着更多系列对象的创建工作。如何应对这种变化?如何绕过常规的对象的创建方法(new),提供一种“封…

HTML基础复习(三)表格

1、表格&#xff1a;<table></table>标签 2、标题<caption></caption> 3、行&#xff1a;<tr></tr>标签 4、表头&#xff1a;<th></th> 5、单元格数据&#xff1a;<td></td>标签&#xff0c;它可以包含表格/列表/…