React Native官方开发文档

以下是本人抄录的:

初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件也是使用ES6中的语法定义。

首先是安装的依赖,必须安装:Node、React Native命令行工具、Python2 以及JDK和Android Studio。

开发的编辑可以根据自己喜好来,本人使用的时WebStorm,和Android Studio有点像。

1、Node、React Native命令行工具是开发是需要管理包用到。
2、Python2 安装暂时不知道干什么用,但开发文档中提到,那就安装吧。
3、Android Studio是在编译Android应用所需的工具和环境。

Node, Python2, JDK

建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。

注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

//设置 npm 镜像以加速后面的过程(或使用科学上网工具)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native 的命令行工具(react-native-cli)

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

npm install -g yarn react-native-cli
//安装完 yarn 后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

JDK环境变量配置

1、新建->变量名”JAVA_HOME”,变量值”C:\Program Files\Java\jdk1.8.0_151”(即JDK的安装路径)
2、编辑->变量名”Path”,在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”
3、新建->变量名“CLASSPATH”,变量值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”

       

配置这三个有什么作用呢?
JAVA_HOME:
为了方便引用,比如,你JDK安装在C:\Program Files\Java\jdk1.6.0目录里,则设置JAVA_HOME为该目录路径, 那么以后你要使用这个路径的时候, 只需输入%JAVA_HOME%即可, 避免每次引用都输入很长的路径串;
2)归一原则, 当你JDK路径被迫改变的时候, 你仅需更改JAVA_HOME的变量值即可, 否则,你就要更改任何用绝对路径引用JDK目录的文档, 要是万一你没有改全, 某个程序找不到JDK, 后果是可想而知的—-系统崩溃!
3)第三方软件会引用约定好的JAVA_HOME变量, 不然, 你将不能正常使用该软件, 以后用JAVA久了就会知道, 要是某个软件不能正常使用, 不妨想想是不是这个问题。 CLASSPATH: (要加.;表示当前路径)
作用:这是一个很有趣,当然也比较折磨初学者的问题, 这个变量设置的目的是为了程序能找到相应的”.class”文件, 不妨举个例子: 你编译一个JAVA程序—A.java, 会得到一个A.class的类文件,你在当前目录下执行java A,
将会得到相应的结果(前提是你已经设置CLASSPATH为”.”). 现在, 你把A.class移到别的目录下(例如:”e:\”), 执行java A, 将会有NoClassDefFindError的异常,原因就是找不到.class文件,
现在你把CLASSPATH增加为:”.;e:\”再运行java A, 看看会有什么结果),一切正常, java命令通过CLASSPATH找到了.class文件! Path:
道理很简单, 你想在任何时候都使用%JAVA_HOME%\bin\java 等来执行java命令吗, 当然不会, 于是, 你可以选择把 %JAVA_HOME%\bin添加到PATH路径下, 这样, 我们在任何路径下就可以仅用java来执行命令了.
(当你在命令提示符窗口输入你个代码时,操作系统会在当前目录和PATH变量目录里查找相应的应用程序, 并且执行.)

检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格) 
若如图所示 显示版本信息 则说明安装和配置成功。

Android 开发环境

安装Android开发环境很麻烦,而且感觉摸不到头脑,不过慢慢摸索会清楚的。

请注意!!!国内用户必须必须必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。
某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,
那么 99% 就是无法正常翻墙。

1. 安装 Android Studio

首先下载和安装 Android Studio,如果大不开,请自行搜索下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

1、Android SDK
2、Android SDK Platform
3、Performance (Intel ® HAXM)
4、Android Virtual Device

然后点击"Next"来安装选中的组件。如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

安装完成后,看到欢迎界面时,就可以进行下面的操作了。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

或者使用Ctrl+Alt+S,或者在工具栏中打开SDK Manager设置界面

可以根据需要来,安装对应版本的SDK

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

  • Android SDK Platform 27
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本。

上面安装SDK的过程可能很慢,我弄了一个下午才弄好。

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),

指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

SDK 默认是安装在下面的目录: c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

React Native在window下的环境搭建(一)的更多相关文章

  1. React Native在window下的环境搭建(二):创建新项目

    React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...

  2. 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

    原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...

  3. android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

      android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...

  4. Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说

    版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...

  5. react native window下的环境搭建和调试方案

    这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充 环境搭建 打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏 ...

  6. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  7. React Native - 1 Windows下的环境配置(Windows+Android)

    参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ)     网站上建议使用Chocolatey去配环境, ...

  8. Windows下React Native开发01 -- Android开发环境搭建

    1.安装jdk 推荐将JDK的bin目录加入系统PATH环境变量(自己百度下怎么配置). 2.安装SDK 直接安装 Android Studio  推荐从AndroidDevTools下载.(也可以直 ...

  9. window下lamp环境搭建

    软件: apache_2.2.25.msi php-5.4.30-Win32-VC9-x86.zip mysql-5.6.11-win32.msi下载地址:http://download.csdn.n ...

随机推荐

  1. oracle累积求和分析函数sum over的使用

    oracle sum()over函数的使用 over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用. over函数的参数:over(partit ...

  2. 触发移动App崩溃的测试场景

    验证在有不同的屏幕分辨率,操作系统和运营商的多个设备上的App行为. 用新发布的操作系统版本验证App的行为. 验证在如隧道,电梯等网络质量突然改变的环境中的App行为. 通过手动网络从蜂窝更改到Wi ...

  3. enctype="multipart/form-data"表单传值问题

    问题: form表单的enctype设置为multipart/form-data后,表单中除了文件后台能拿到,其他值后台都拿不到. 知识点: 一.application/x-www-form-urle ...

  4. 项目三(2)——person与学生

    编程实现Person类,学生类的设计及其继承关系 (同第六章课后第三题) class Person{ private String name; private String addr; private ...

  5. 让MySQL数据库跑的更快的7个优化建议!

    随着容量和负载的增加,MySQL 的性能会日趋缓慢.这里有七点建议能够保证 MySQL 的平稳运行. 性能是我们衡量应用的一种方式,而应用性能的一项指标就是用户体验,也就是平时我们常说的:“用户需要等 ...

  6. node.js 调用第三方服务

    node作为客户端调用第三方服务   nodejs.cn/api 1. let http = require('http'); let util = require("util") ...

  7. Angular + Websocket

    Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...

  8. windows server 2008 R2之取消多余的安全配置

    一:取消IE浏览器的安全配置(使IE浏览器可以正常上网) 管理员禁用即可 二.取消关机时强制输入关机备注 运行gpedit.msc,选择计算机配置->管理模板->系统->提示“关机时 ...

  9. php 多线程

    windows下安装php真正的多线程扩展pthreads教程 http://www.thinkphp.cn/topic/22676.html PHP 安装 Pthreads (解决 class Th ...

  10. Spring Boot - 项目构建与解析

    构建 Maven 项目 通过官方的 Spring Initializr 工具来产生基础项目,访问 http://start.spring.io/ ,如下图所示,该页面提供了以Maven构建Spring ...