(React-Native 学习之一) Windows版本搭建安装React Native环境配置
Reat-Native 环境配置以及软件安装
说在前面的话:
感谢同事金晓冰倾情奉献本环境搭建教程
之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特意更新一贴来说明。关于os x环境搭建以及react native入门学习资料请移步: http://www.lcode.org/react-native/
刚创建的React Native技术交流3群(496508742),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
1、安装Java:
这里需要注意对环境变量的设置,可以根据java -version来检测一下
2、安装SDK
这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk)设置环境变量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
3、设置SDK
打开Android SDK Manager。
选中以下项目:
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
Local Maven repository for Support Libraries
4、安装node
这货是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本
下载node.js,找好对应的版本,然后去安装就可以了。大家可以通过node -v的命令来测试NodeJS是否安装成功
5、安装git
安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可
下载地址:https://git-for-windows.github.io/
安装:
6、安装react-native命令行工具react-native-cli
git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone
1) 在命令行中进入你希望RN安装的目录
2) 输入git clone https://github.com/facebook/react-native.git,等待下载
clone成功后:
3) 进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g
安装好之后,可以命令行下就有react-native命令了
7、创建RN项目
进入你希望创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)
目录结构:
7、运行package
在命令行中进入项目目录,输入react-native start,等待一段时间:
这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
7、运行项目
刚刚运行package的命令行不要关闭,重新启动一个新的命令行,
进入项目目录,输入react-native run-android
等待运行(如果是第一次运行,首先会下载gradle,时间较长)
运行成功后出现下图
第一次手机肯定报错
这时候我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
“摇一摇”这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单。
这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
请尊重原创。
相关信息
- React-Native(一):React Native环境搭建
- React Native环境配置之Windows版本搭建
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
- React Native windows搭建记录
- 史上最全Windows版本搭建安装React Native环境配置
- 史上最详细 Windows 版本搭建安装 React Native 环境配置
- Windows下搭建React Native开发环境
- React-Native(四):React Native之View学习
- react-native android环境搭建
- 最新版React Native环境搭建
- React Native学习
- React Native初试:Windows下Andriod环境搭建
- 在Windows下搭建React Native Android开发环境
- 简单搭建React-Native环境
- React Native调试工具安装(React Devtools、react-native-debugger)
- React Native 教程(一): 环境搭建(安卓)
- React-Native开发-环境配置
- React Navigation & React Native & React Native Navigation
- react native 增加react-native-storage
- react native 增加react-native-camera
- react native native module
- React Native & react-native-web-player & React Native for Web
- React-Native 环境安装及调试(Mac版)
- React-Native(二):React Native开发工具vs code配置
- react-native-xupdate-new 一键实现react-native应用版本更新
- React-Native(三):React Native是基于React设计的
- React-Native(三):React Native是基于React设计的
- React Native环境搭建的坑(Mac + Windows)
- React-Native 0.63踩坑之旅--ios环境搭建
- React-Native 0.63踩坑之旅--android环境搭建
- React Native MacOS IOS配置
- React Native MacOS IOS配置
- React-Native 安装环境问题总结
- React Native
- react native环境搭建与生命周期
- React Native 选择器组件 / react-native-slidepicker
- React Native 选择器组件 / react-native-slidepicker
- react-native windows 环境搭配
- react-native(windows)环境搭建
- react-native+mobx
- react-native+mobx
- React Native——搭建开发环境、创建Hello World
- React-Native 分享二之React-Navigation
- windows 64位下,React-Native环境搭建详解 (Android)
- React Native学习笔记之2
- React Native学习笔记之1
- Windows下React Native开发01 -- Android开发环境搭建
- React Native——react-navigation的使用
- react-native搭建用例(非CRNA)
- react-native搭建用例(非CRNA)
热门资讯
推荐资讯
最新资讯
- 每个程序员必学的10个Git命令
- [nginx] - 使用nginx实现反向代理,动静分离,负载均衡,session共享
- 【小白学算法】10.递归的调用机制、使用时要注意的规则
- nginx反向代理之缓存,负载均衡,动静分离的配置详解
- Android连载24-本地广播和强制下线功能
- Android开机广播和关机广播
- android仿iphone的地区选择
- 入坑 Android Gradle 插件开发(一)
- Android——实现【搜索框】与点击搜索事件监听 —— SearchView
- oracle 10g r2 安装clusterware ocr 指定/dev/raw/raw1 报错
- Android资源文件assets和raw的比较
- android 读取 raw 中的文件。
- Android 读取res文件中raw的json文件
- 线性回归算法之鸢尾花特征分类【机器学习】
- 机器学习 | 鸢尾花分类项目实战
- 路由/三层交换机DHCP下发地址详解【华为eNSP】
- tensorflow--鸢尾花分类
- 生产者-消费者问题详细分析【操作系统原理】
- 机器学习之Python使用KNN算法进行电影类型预测,对鸢尾花进行分类
- 支持向量机算法之鸢尾花特征分类【机器学习】
评论