Windows下搭建React Native开发环境

最新推荐文章于 2022-01-26 15:32:48 发布
最新推荐文章于 2022-01-26 15:32:48 发布
阅读量185 收藏
点赞数 1
分类专栏： React Native学习 文章标签： RN  React Native环境 windows环境变量
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/src_linux/article/details/80975235
版权

1.Chocolatey

需要以管理员的身份来运行命令提示符窗口, Win10开始菜单->鼠标右键->Windows PowerShell(管理员)

 

  1. @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
 

 

2.Python 2
 

注意目前不支持Python 3版本。
 

 

 

  1. choco install python2
 

 

3.Node
 

打开命令提示符窗口，使用Chocolatey来安装NodeJS。
 

 

 

  1. choco install nodejs.install
 

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
 

 

 

  1. npm config set registry https://registry.npm.taobao.org --global
  2. npm config set disturl https://npm.taobao.org/dist --global
 

 

4.Yarn、React Native的命令行工具（react-native-cli）
 

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
 

 

 

  1. npm install -g yarn react-native-cli
 

安装完yarn后同理也要设置镜像源：
 

 

 

  1. yarn config set registry https://registry.npm.taobao.org --global
  2. yarn config set disturl https://npm.taobao.org/dist --global
 

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。 
注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。
 

 

5.Android Studio
 

React Native目前需要Android Studio2.0或更高版本。
 

  • 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
  • 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository.
 

 

6.ANDROID_HOME环境变量
 

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。 
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建 
此处输入图片的描述
 

 

推荐工具
 

 

7.Gradle Daemon
 

开启Gradle Daemon可以极大地提升java代码的增量编译速度。
 

 

 

  1. (if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
 

 

8.将Android SDK的Tools目录添加到PATH变量中
 

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。 
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑 
此处输入图片的描述
 

 

9.测试安装
 

 

 

  1. react-native init AwesomeProject
  2. cd AwesomeProject
  3. react-native run-android
 

 

代码编写工具
 

 

10.WebStorm
 

http://www.jetbrains.com/webstorm/download/download-thanks.html 
安装之后激活 
方法一：（更新时间：2018/4/8）v3.3 
注册时，在打开的License Activation窗口中选择“License server”，在输入框输入下面的网址： 
http://idea.wrbugtest.tk/ (2018/06/16) 
点击：Activate即可。 
参考：https://blog.csdn.net/voke_/article/details/76418116

                

        

        

    




    

      

        

            

              
                
                  Tiger.Lee
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
React Native 搭建开发环境的方法步骤

				
			

			

				

					08-29
				

			

		

		

			
				
本篇文章主要介绍了React Native 搭建开发环境的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
Windows搭建react-native（RN）环境，RN版本0.55，jdk8，node12.2.0,Android Studio

				
			

			

				

					qq_45152044的博客
				

				

					06-10
					
					3857
					
				

			

		

		

			
				
Windows搭建react-native（RN）环境，RN版本0.xx，jdk8，node12.2.0,Android Studio，

			
		

	



                


  
              

                


	

		

			

				
					
React Native开发一 webstorm搭建React Native开发环境

					
热门推荐

				
			

			

				

					带你装逼带你飞的专栏
				

				

					12-16
					
					2万+
					
				

			

		

		

			
				
1 前言最近打算真的开始学习一下跨平台APP开发，一直在关注RN，因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了，笔者在一家传统公司)。最后开始打算从RN开始学起。废话不多说，开始搞起。2 基于webstorm的RN环境搭建本次开发采用的环境为windows10+webstorm2017.3+安卓开发环境 
需要的开发环境主要有node.js + react native +

			
		

	





	

		

			

				
					
React配置@src根路径

				
			

			

				

					oops
				

				

					01-26
					
					2605
					
				

			

		

		

			
				
我们通过create-react-app脚手架搭建的项目其中的webpack配置文件都是被封装起来的，项目中我们需要使用@src配置根路径，从而方便使用绝对路径的话，就需要去把webpack抽离出来进行修改。
 

执行 npm run eject （此操作是不可逆的！）
执行完成后，项目目录中会多出两个文件夹config和scripts
在config中找到webpack.config.js文件
在alias中添加'@src': path.resolve('src')

alias: {
		/

			
		

	



		

			
		



	

		

			

				
					
Windows系统下React Native开发环境搭建教程

				
			

			

				

					qq_35307549的博客
				

				

					06-12
					
					3667
					
				

			

		

		

			
				
    虽然网上有很多React Native开发环境的搭建教程，但是自己爬过了坑之后还是想和大家一起分享。话不多说，我们上干货。    一、node.js的下载    首先，我们需要下载版本较新的node.js，去官网下载最新的node.js我们直接下载后缀是.msi的文件，下载后直接点击运行即可。注意，安装的目录中不要有中文，以防出现不必要的麻烦。这里是下载的官网链接（http://nodej...

			
		

	





	

		

			

				
					
Windows下搭建ReactNative开发环境（Android）

				
			

			

				

					成长之路
				

				

					03-09
					
					1万+
					
				

			

		

		

			
				
学习了一段时间ReactNative，最近有空总结一下，同时给正在学习ReactNative的伙伴提供参考，少走弯路。现在网上大部分的教程都是不怎么完善，或者是Mac下的实现，然很多人对ReactNative望而却步，官方的文档也是过于简单，很多问题都没有记录，我经过自己的实践总结，本文主要记录怎么搭建ReactNative环境并且创建一个Hello World（Android）程序。

			
		

	





	

		

			

				
					
VSCode 配置React Native开发环境的方法

				
			

			

				

					11-29
				

			

		

		

			
				
本文介绍了VSCode 配置React Native开发环境的方法，分享给大家，具体如下：  1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用  输入react-native安装React Native Tools  假定你已经在设备上...

			
		

	





	

		

			

				
					
windows环境下Android的ReactNative开发环境搭建

				
			

			

				

					08-18
				

			

		

		

			
				
windows环境下Android的ReactNative开发环境搭建

			
		

	





	

		

			

				
					
使用Win10+Android+夜神安卓模拟器,搭建ReactNative开发环境

				
			

			

				

					08-26
				

			

		

		

			
				
今天小编就为大家分享一篇关于使用Win10+Android+夜神安卓模拟器,搭建ReactNative开发环境，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧

			
		

	





	

		

			

				
					
react-native配置相对路径@

				
			

			

				

					九段刀客的博客
				

				

					07-19
					
					702
					
				

			

		

		

			
				
安装插件
npm install babel-plugin-root-import --save-dev

跟目录新增.babelrc文件
{
  "plugins": [
    ["babel-plugin-root-import",{
      "rootPathPrefix": "@",
      "rootPathSuffix": "./src"
    }]
  ]
}





			
		

	





	

		

			

				
					
在Windows下搭建React Native Android开发环境

				
			

			

				

					charming的专栏
				

				

					05-16
					
					2325
					
				

			

		

		

			
				
一、安装JDK 
二、安装Android SDK 
 
三、安装C++环境 
网上很多以前的资料（其实就是那一份）都说安装Visual Studio 2013或2015，编译node.js的C++模块时需要用到。这里我没安装，我的系统是win7，好像win7自带了编译C++的工具,然后之前安装过了c-free这个软件，又考虑到电脑承受能力，所以没就安装大的软件。等后面有问题了再说。事实在后面没有出现

			
		

	





	

		

			

				
					
window10搭建react-native开发环境——搭配夜神模拟器

				
			

			

				

					“创造之”的博客
				

				

					10-07
					
					1350
					
				

			

		

		

			
				
因为开发需要要在自己的台式机上搞个react-native环境开发app，折腾了好一会儿，觉得有很多细节还是要记一下。
首先说明，本人使用的是react-native-cli插件思路，搭建所有的环境第一步就应该（强烈建议）查阅官方文档教程（先查一下，没有再论），不建议在网上找个人教程来看，大家说的参差不齐，有时很容易越搞越麻烦，基本情况官方都不会吝啬文档，其好处就是全面，保鲜，所以先刀react-...

			
		

	





	

		

			

				
					
Windows下搭建React native开发环境

				
			

			

				

					pursue的博客
				

				

					06-14
					
					1795
					
				

			

		

		

			
				
一、环境搭建 
react native本地搭建其实就是简单的几步: 
1、首先得安装node.js，下载地址：https://nodejs.org/en/，下载最新的，如图： 
2、打开cmd运行执行以下命令： 
    npminstall−greact−native−cli成功后reactnative环境就搭建完成了，是不是很简单。可以在命令行输入： npm install -g react-

			
		

	





	

		

			

				
					
最详细的Windows版本搭建安装React Native环境配置

				
			

			

				

					ＺＥＥＧＡＴＥＳ的博客
				

				

					05-23
					
					829
					
				

			

		

		

			
				
版权声明：本文为博主原创文章，未经博主允许不得转载。




目录(?)[+]





最详细的Windows版本搭建安装React Native环境配置

网上大部分的React Native环境搭建的视频和博客都是Mac的，剩下为数不多的windows环境搭建的文章全是坑（博主流泪呀）
1、安装Java

这里需要注意对环境变量的设置，可以根据Java -ve

			
		

	





	

		

			

				
					
Windows下搭建react-native开发环境

				
			

			

				

					mortal_li的博客
				

				

					03-02
					
					2292
					
				

			

		

		

			
				
最近公司没有什么事情,所以决定研究一下react-native.react-native是Facebook研发的一种用于移动端研发hybrid app 的技术(研究的不深,目前只知道这个作用),那么对于react-native的环境搭建却是有些复杂.那么对于刚刚完成环境搭建的我来说,赶紧把这个过程记录下来,等忘记的时候拿出来阅览一下.好了,废话不说了,进入正题.第一步,我们需要安装各种软件:1,n...

			
		

	





	

		

			

				
					
React Native Windows下搭建React Native开发环境

				
			

			

				

					RamboTong
				

				

					09-16
					
					416
					
				

			

		

		

			
				
Windows下搭建React Native环境
  前提是Android环境已经搭建完成
工具
Node.js (node-v6.11.3-x64.msi)  
安装步骤1、安装Node.js根据上面的.msi安装，安装完成后，windows系统会自动添加node相关工具的环境变量判断是否安装成功: 
执行命令:node -v  安装成功，则有如下提示: 
2、安装React Native执行命令

			
		

	





	

		

			

				
					
高级色系PPT11.pptx

				
			

			

				

					05-08
				

			

		

		

			
				
高级色系PPT11.pptx

			
		

	





	

		

			

				
					
node-v7.9.0-linux-x86.tar.xz

					
最新发布

				
			

			

				

					05-08
				

			

		

		

			
				
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。

Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。

Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。

在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。



			
		

	





	

		

			

				
					
基于tensorflow的的cnn卷积神经网络的图像识别分类

				
			

			

				

					05-08
				

			

		

		

			
				
【作品名称】：基于tensorflow的的cnn卷积神经网络的图像识别分类

【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

			
		

	





	

		

			

				
					
Mac上搭建React Native开发环境

				
			

			

				

					05-30
				

			

		

		

			
				
好的，以下是在Mac上搭建React Native开发环境的步骤：  1. 安装Homebrew 在终端输入以下命令安装Homebrew： ``` /usr/bin/ruby -e "$(curl -fsSL ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值