Windows下react-native安装步骤以及安装时候遇到各类已填平的坑

    Facebook 在React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,本中文教程翻译自 React Native 官方文档。
    React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
    React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。

准备

  • 安装Java环境(自行google或baidu)。
  • 安装Android SDK(自行google或baidu)。
  • 安装node和git参考我一篇搭建博客有涉及这俩个的安装。
  • 安装python下载路径,我按照2.7右边那个版本。为什么选择2.7,因为3.x.x不支持详情看这里

这边需要注意下,需要配置Java和Android SDK路径到系统环境的Path
这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> D:\Android\sdk)设置环境变量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

安装react-native:

  • 打开CMD命令窗口,选择自己要放的文件目录下,使用git clone命令从github隆react-native至本地。
git clone https:github.com/facebook/react-native.git

Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第1张图片
* 接着进入react-native目录下的react-native-cli目录,输入命令。

npm install -g

Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第2张图片

创建react-native项目

  • 指定到目录下执行以下命令,创建新的项目AwesomeProject。
react-native init AwesomeProject

由于被墙的原因,会比较慢,耐心等待!
Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第3张图片

运行package

  • 进到刚创建的AwesomeProject,执行react-native start。
cd AwesomeProject
react-native start

Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第4张图片
* 此时可以通过浏览器访问 http://localhost:8081/index.android.bundle?platform=android,出现如下页面表示服务端已经可以了。
Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第5张图片

cmd运行项目

一种先打开模拟器或者链接手机设备。

  • 另外再启动一个新的命令行,到你的项目下,执行(设备允许usb调试)。
react-native run-android

Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第6张图片
成功了!

另一种没有开模拟器或者链接手机设备。

  • 也是启动上面那句代码
react-native run-android

之后配置路径请看我朋友的文章
https://duduzai.github.io/2016/03/23/SetupReactNativeInWindows/

错误集合:
Windows下react-native安装步骤以及安装时候遇到各类已填平的坑_第7张图片
没有连接上模拟器或者手机设备,请开模拟器或者连接上手机设备在执行react-native run-android

如果构建项目删除,但发现Windows删除不了过长的文件,这边有工具可以安装下解决win下文件目录太长无法删除的问题

安装
npm install fuckwinfsdel -g
使用
fuckwinfsdel youdir
例
fuckwinfsdel node_modules
将会删除当前目录下 node_modules 文件夹。

fuckwinfsdel D:\expressgit\node_modules
将会删除D:\expressgit\node_modules文件夹。

项目地址 https://github.com/hezedu/fuckwinfsdel

欢迎关注我的博客:
个人博客:http://soubw.com/
CSDN博客:http://blog.csdn.net/wx_jin


参考文章:
https://duduzai.github.io/2016/03/23/SetupReactNativeInWindows/
http://wiki.jikexueyuan.com/project/react-native/

你可能感兴趣的:(IOS,Android,Windows,RN)