文档章节

React入门第二弹——React Native环境搭建

我家有宝
 我家有宝
发布于 2016/01/14 10:33
字数 2981
阅读 1056
收藏 4

上一弹讲了React的内容,为什么这一弹突然就跳到了React Native了,其实,我想说的是我看中的还是RN,使用它能够实现跨平台;

原因下一弹再讲,先上环境搭建,可能在搭建环境的过程中会遇到若干问题,有大牛已经踩好了坑,借鉴即可;







本文环境搭建包括三种:Windows、Ubuntu(Linux)、Mac Os。官方最初推出的React Native 环境实在OSX上的,在0.14版本之后(目前最新是0.18),可以支持Linux和Windows环境了。

官网描述:

由于React Native开发iOS需要Mac电脑,并且大部分Facebook和为React Native贡献代码的工程师使用的都是Mac电脑,所以支持OS X是最高优先级的。尽管如此,我们也希望Linux和Windows能够得到支持。我们相信最好的对于Linux和Windows的支持,一定来自于日常 习惯于使用这些系统的人们。

这就是为什么对于Linux和Windows的支持需要来自社区不间断的共同努力。给我们提交任何的问题报告,并且提交解决问题的Pull Request,我们会协助检验和合并这些修改。我们期待在未来能看到您的贡献并且非常感谢您在这个过程中付出的耐心和努力。

   从0.14版本起,Android开发环境已经基本可以在Linux和Windows环境下运行。你需要安装4.0或更高版本的Node.js。在Linux上,我们建议你安装watchman,否则你可能会遇到Node.js监视文件系统的一个BUG。

   在Windows平台上还缺少什么

在Windows平台上,在你运行react-native run-android之后,packager不会自动启动。你需要这样自行启动它:

#对于React Native版本 < 0.14的cd MyAwesomeAppnode node_modules/react-native/packager/packager.js#对于React Native版本 >= 0.14的 (这个版本移除了packager.js)cd MyAwesomeApp
react-native start

   如果你碰到了ERROR  Watcher took too long to load的报错,请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件的具体路径是node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.jsnode_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。

鉴于Windows和Linux上安装的麻烦情况,先介绍前两种操作系统上的安装步骤。


一、Windows环境搭建

Windows上的React环境搭建,由于我本人使用的ubuntu系统,因此未来的及进行验证,请谅解。

1.最新情报

0.14以上版本不再需要自行调用bundle了。

0.14.1已经修复了之前在windows下命令行的BUG,不过图片资源处理还有一个BUG需要解决。

0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。

2.安装JDK

从Java官网下载JDK并安装。请注意选择x86还是x64版本。

推荐将JDK的bin目录加入系统PATH环境变量。

3.安装Android SDK

可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

为了加速下载,推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

  • Extras/Android Support Repository

推荐使用腾讯Bugly的镜像加速下载。查看说明

推荐将SDK的platform-tools子目录加入系统PATH环境变量。

4.安装C++环境

推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

5.安装msysgit

虽然不知道为什么init那一步需要用到这个东西,在这里下载安装。

6.安装Python

从官网下载并安装python 2.7.x

7.安装node.js

从官网下载node.js的官方4.1版本或更高版本。

建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

8安装react-native命令行工具

npm install -g react-native-cli

9.创建项目

进入你的工作目录,运行

react-native init MyProject

并耐心等待数(或数十)分钟。

0.14版本中带来了一个新的问题以至于在windows下引用图片不能成功(在0.15后修复),请参考这里进行对应修改以绕过此BUG。

11.运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)

12.运行模拟器

推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

13.安卓运行

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

14安卓调试

打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

在模拟器或真机菜单中选择Debug JS,即可开始调试。


二、Linux上的环境搭建

以ubuntu kylin15.10为例,搭建React Native的开发环境如下:

  1.安装 node.js

  在官网(https://nodejs.org/en/)下载源码安装即可,

  $ node -v  // 安装后查看版本


  2.安装 watchman

参考文档(https://facebook.github.io/watchman/docs/install.html)

  安装依赖

  $ sudo apt-get install autoconf  automake python-dev

  安装 watchman, 如果出错, 查看安装依赖的详细文档

  $ git clone https://github.com/facebook/watchman.git
    $ cd watchman
    $ git checkout v4.3.0  # the latest stable release
    $ ./autogen.sh
    $ ./configure
    $ make
    $ sudo make install


  3.安装 react-native

  $ npm install -g react-native-cli


   4. 创建react-native 项目

  $ react-native init AwesomeProject


  5.运行

  启动 server, 如果没有启动server , 会报错 React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)

  $ react-native start

编译apk,并运行到模拟器, 需要配置好Android开发的环境变量(ANDROID_HOME, GRADLE_HOME )

$ react-native run-android

做一些修改

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;

var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hanks,  Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.reply}>
Yep, I do!
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
// 添加style
reply:{
color: '#e8801b',
fontSize: 20
}
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

再次reload js, 可以通过菜单调出选项。


三、OSX上的环境搭建

呵呵,不多说,上官网即可。

1.环境需求

  1. OS X - 本向导假设您的操作系统是OS X,因为这是开发iOS应用所必须的。

  2. 推荐使用Homebrew 来安装Watchman和Flow

  3. 安装Node.js 4.0或更高版本(译注:如果你并不使用Node.js开发网站,只是用于React Native的开发,那么请先安装homebrew,然后直接使用brew install node安装即可,不必按照下面的nvm的安装步骤)

    • 安装 nvm(安装向导在这里)。然后运行nvm install node && nvm alias default node,这将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node命令来启动Node.js环境。nvm使你可以可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。

    • 如果你从未接触过npm,推荐阅读npm的文档

  4. 在命令行中输入brew install watchman,我们推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。

  5. 如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow来安装flow。(译注:新手可以跳过这一步)

我们推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本。

2.iOS开发环境准备

你需要安装Xcode 7.0或者更高版本。你可以在App Store中找到并安装Xcode。

译注:如果您选择从第三方网站/镜像下载Xcode,请务必从正规镜像网站下载验证文件Hash以防止类似XcodeGhost的安全风险发生,不要信任论坛、百度空间等分享渠道

3.Android开发环境准备

要使React Native应用支持Android,首先需要安装Android SDK (如果你不想连接安卓设备,那么还需要一个安卓模拟器)。参见 Android开发指南 了解如何搭建安卓开发环境。

注: 现在Windows和Linux也在实验性的支持Android开发。

译注: Windows用户可以参考这个帖子来搭建环境。

快速开始

    $ npm install -g react-native-cli
    $ react-native init AwesomeProject

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。
本站论坛区提供了完整的绿色纯净新项目包。完整打包全部iOS和Android的第三方依赖,只要环境配置正确,无需科学上网漫长等待,解压即可直接运行。

4.运行iOS应用

  • $ cd AwesomeProject

  • 用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。

  • 使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。

  • 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

5.运行Android应用

  • $ cd AwesomeProject

  • $ react-native run-android

  • 使用你喜欢的文本编辑器打开index.android.js并随便改上几行

  • 按Menu键(通常是F2,在Genymotion模拟器中是⌘+M)然后选择 Reload JS 就可以看到你的最新修改。

  • 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

注:: 如果你打算在真实设备而非模拟器上运行,参见在设备上运行

恭喜!现在你已经成功运行并修改了你的第一个React Native应用!


扫一扫,关注 全栈技术 公众号

本文转载自:http://mp.weixin.qq.com/s?__biz=MzI0MjE2MTA0Ng==&mid=402122277&idx=1&sn=730461e0e72c3445d8a8a4b26...

我家有宝
粉丝 8
博文 69
码字总数 46410
作品 0
南京
高级程序员
私信 提问
React-Native入门指南(一)——环境配置 & Hello World

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
4.1K
32
开发微信小程序的必备技能图谱

今天被微信小程序彻底刷屏了,哎呀,JS开发者坐等涨工资吧。 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...

Yomut
2016/09/23
143
0
React-Native学习资料

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/04/06
261
0
React-Native入门指南(三) ——CSS和UI布局

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
262
0
React-Native入门指南(六)——JSX在React-Native中的应用

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
219
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
6
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
7
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
5
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
6
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部