ReactNative win10初体验

摘要:
没有进一步的探索,就回去研究吧。如果您计划成功更改Genymotion,您也可以连接到真实的机器(我没有连接)。4.保持打包程序打开,然后在MyProject下打开一个新的命令窗口。在android上运行react nativer,然后等待一段时间,第一次运行会很慢。5.然后,您可以看到模拟器上的程序自行启动并遇到几个错误:1.React native不是内部命令。在npminstall greact native cli之后,打开nodejs文件夹并输入node_Global,我发现Cmd和react native下面有一个reactive active;如果没有,建议删除global_模块下的node_节点,然后再次运行npminstall greact native cli。

根据RN中文网上的文档搭建环境,有的地方说的不是很清楚,所以小白的我搞了很久,终于搭建成功,这里分享一下

1. java:

  jdk和jre,我下载的是1.8(因为官方文档上说AndroidStudio需要1.8或更高版本),下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

  (注意:win10的环境变量格式可能和win7不同,注意一下)

  环境变量: 系统变量-->新建JAVA_HOME,变量值填写jdk的安装目录

       系统变量-->Path 变量-->编辑,添加%JAVA_HOME%in 和 %JAVA_HOME%jrein

  都设置好之后可以运行cmd开启命令行,输入java -version测试一下,如果能够成功正确输出java版本号,那就没毛病了啊

ReactNative win10初体验第1张ReactNative win10初体验第2张

2. Android SDK:

我这里下载了一个Android Studio,官方文档说需要2.0以上版本,也没什么好说的,这段就看官方文档吧 http://reactnative.cn/docs/0.28/getting-started.html

安装好以后,要设置环境变量:

    a. 系统变量-->新建ANDROID_HOME-->变量值是你安装的Android SDK的路径

    b. 系统变量-->Path-->添加两个值 %ANDROID_HOME% ools 和 %ANDROID_HOME%platform-tools

ReactNative win10初体验第3张

 ReactNative win10初体验第4张

3. NodeJS

  https://nodejs.org/en/  在官网下载,选择Recommended For Most Users版本,需要修改安装路径的就改下安装路径,一路下一步- -

  把nodejs路径加进Path环境变量

  装好后可以在命令行里输入node -v来验证安装是否成功

4. Git

  https://git-for-windows.github.io/     

  在安装过程中注意勾选"Use Git from the Windows Command Prompt",    "Use Window's default console window"。 需要修改安装路径的就改下安装路径,剩下的一路下一步

5. 安装react native命令行工具react-native-cli

  运行cmd, 输入 npm install -g react-native-cli

6. 安装C++环境

  VS2013或者VS2015,  

  VS2013安装完之后运行npm config set msvs_version 2013 --global;VS2015安装完之后运行npm config set msvs_version 2015 --global

  最后运行npm install bcrypt

7. 安装python(2.7.X的版本)

  https://www.python.org/downloads/release/python-2710/

以上安装完,就可以创建一个项目目录了,然后接下来:

1. 进入项目目录,运行 react-native init MyProject,等待几分钟

2. 进入MyProject,运行packager:   react-native start, 可以看到命令窗口最后有段“React packager ready.”,继续往下进行

3. 运行模拟器

  我用的是AndroidStudio的模拟器,本来想用Genymotion,依赖Virtualbox的,他们两个搞了半天没有运行成功,查了一下大概意思是win10不兼容?没有往深探究,回头研究一下如果成功打算换Genymotion,当然也可以连真机(我没连)

4. 保持packager开启(第2步的命令窗口),然后在MyProject下新开一个命令窗口,运行 react-native run-android,等待一会,第一次运行会很慢

5. 然后就可以看到模拟器上程序自己启动了

遇到的几个错误:

1. react-native 不是内部命令什么的

  在npm install -g react-native-cli之后,打开你的nodejs文件夹,进入node_global,发现下面有个react-native.cmd和react-native;如果没有,建议删掉node_global下的node_modules下的react-native-cli,然后重新运行npm install -g react-native-cli。

  解决办法: 把node_global的路径也加进Path环境变量;改完环境变量之后要重新开启cmd命令窗口才有效果

2. react-native run-android时,提示 error: more than one device/emulator

ReactNative win10初体验第5张

解决方法:打开任务管理器,把所有的adb和emulator的线程都干掉,重新运行 react-native run-android

3. npm install 相关命令时,提示 Error: Can't find Python executable "XX:/Python27", you can set the Python env variable.

此时此刻,我的环境变量确认没问题,在Path变量里加入了Python的路径,没加的同学加一下。为什么还报错

ReactNative win10初体验第6张

解决方法: 运行 npm config set python D:/Python27/python

  D:/Python27 是我python的安装文件夹, 后面的python代表指定到.exe文件

4. 未能加载C++组件

因为之前没有安装C++环境,所以遇到了这个问题,请参考上面第6条

ReactNative win10初体验第7张

windows玩RN坑很多,一个接一个,慢慢折腾吧,遇到问题去搜一搜基本都能搜到,加油

免责声明:文章转载自《ReactNative win10初体验》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇TensorFlow2.0教程-使用keras训练模型Qt学习 之 Socket通信下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ES6-10笔记(let&const -- Array)

大纲 scope-作用域 作用域是指程序源代码中定义变量的区域,规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。 JavaScript作用域共有两种主要的工作模型——词法作用域(静态作用域)和动态作用域。 JavaScript默认采用词法作用域(lexical scoping),也就是静态作用域。 词法作用域是由开发者在写代码时将变量和...

Perl文件系统

一、文件输入/输出函数 1、基本I/O函数 open:允许程序访问文件  close:终止文件访问  print:文件写入字符串  write:向文件写入格式化信息  printf:格式化字符串并输出到文件  1)open函数 open函数将文件变量与某文件联系起来,提供访问文件的接口,例如:open(MYVAR, "/u/file"); 如果文件打开成功...

SSIS 学习(4):变量和表达式【转】

变量,作为程序员的我们,是一个多么熟悉的概念,从开始学习编程的第一天起,就要了解什么是变量?如何定义一个变量?变量的使用范围等。现在还有必 要在这里大费口舌来讨论“变量”吗?不错,我们今天谈的变量,也脱离不了这个范畴:如何定义一个变量?如何使用变量?变量的使用范围等。但是在ETL的发 展过程中,从以前Sql Server 97、Sql Server 200...

php性能调优

第一章  针对系统调用过多的优化 我这次的优化针对syscall调用过多的问题,所以使用strace跟踪apache进行分析。 1.  apache2ctl -X & 使用-X(debug)参数启动httpd进程,这个时候只启动1个httpd进程 2. ps -ef | grep httpd 找到需要strace的pid 3. strace -p...

less和scss

一、less基础语法 1、声明变量:@变量名:变量值;      使用变量:@变量名; 2、混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 2)有参无默认值混合: 声明:.class(@param){...

Activiti工作流引擎数据库表结构

1、 数据库的命名     Acitiviti数据库中表的命名都是以ACT_开头的。第二部分是一个两个字符用例表的标识。此用例大体与服务API是匹配的。 l ACT_RE_*:’RE’表示repository。带此前缀的表包含的是静态信息,如,流程定义,流程的资源(图片,规则等)。 l ACT_RU_*:’RU’表示runtime。这是运行时的表存储着流程...