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

最新推荐文章于 2024-09-14 07:24:50 发布
最新推荐文章于 2024-09-14 07:24:50 发布
阅读量126 收藏
点赞数
原文链接：https://my.oschina.net/Gxhpro/blog/602210
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

上一弹讲了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.js或node_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的文档

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

如果你希望使用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应用！


132615_7SMz_1408868.jpg

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

转载于:https://my.oschina.net/Gxhpro/blog/602210

weixin_33728708
关注
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2289
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
react点滴yan
weixin_42201346的博客
06-07 811
掘金搜react https://juejin.im/search?query=React%20Developer%20Tools&type=all
构建RN碰到的问题
缘聚缘随缘
11-19 1264
RN运行构建常见问题
Watchman – 用于更改的文件和目录监视工具
allway2的博客
05-13 964
安装所需的依赖项后，您可以通过下载其 github 存储库开始构建 watchman，移动到本地存储库，使用以下命令配置、构建和安装它。例如，在以下命令中，“”是触发器的名称，并且是在所监视的目录中检测到更改时将调用的脚本。是一种开源文件监视服务，可在文件更改时监视和记录文件，或触发操作。以监视目录时，该目录已添加到监视列表中并查看它，请运行以下命令。基于上述配置，每次目录更改时，都会在其中创建一个文件，您可以使用。是一种开源和跨平台的文件监视服务，可在文件更改时。在本文中，我们将解释如何安装和使用。
Mac 安装watchman 常见错误
weixin_44510655的博客
10-17 1951
Mac 安装watchman 常见错误
Watchman 的安装
weixin_30239339的博客
04-18 3975
先查看gcc的版本 gcc --version 如果gcc的版本低于4.8，就要升级gcc的版本了。在这里，就不延时升级gcc了， 安装watchman git clone https://github.com/facebook/watchman.git如果下载不下来就要源码安装了，我得就是源码安装的。安装编译工具 [root@master ~]# yum in...
react native 环境搭建的问题总结复盘
qq_44041514的博客
01-17 2525
第一次搭建React Native 环境的过程记录
React Native mac环境搭建
Clement_Gu的博客
05-31 1090
一、React Native 简介2015年3月26日，FaceBook公司对外正式发布了React Native ——使用React框架跨平台开发原生移动应用的开源技术框架（简称RN）。开发者可以使用RN高效的开发运行与Android与iOS操作系统的应用程序。他的设计理念是：使用React Native 开发，既拥有Native良好的人机交互体验，又保留了React框架的开发效率。React、...
Vue2入门课程
qq_27009517的博客
01-17 1007
第一章 Vue.js简介 Vue简介 第二章 基础特性 实例及选项 模板语法1 模板语法2 计算属性和侦听器 class与style的绑定 条件渲染 列表渲染 事件判定与监听 表单用法 第三章 组件基础 组件基础1 组件基础2 组件基础3 第四章 指令 一些内置指令 自定义指令 第五章 过滤器 过滤器注册 第六章 过渡 和 动画 CSS过渡 CSS 动画 第七章 深入了解组件 组件注册 Prop 单向数据流 自定义事件 ==============.
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3830
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
watchman.zip
10-22
一款屡获殊荣的系统安全软件,提供文件保护、应用程序使用日志、访问控制管理等功能,能够停止非法程序的运行、锁定文件或文件夹、保护软件配置,以及监控程序使用情况!
watchman for windows7 64
12-16
watchman for windows7 64
新电脑Mac安装前端环境，未完待续～
weixin_43517190的博客
11-27 1866
前端环境搭建
Watchman 项目使用教程
最新发布
gitblog_00935的博客
09-14 492
Watchman 项目使用教程 watchman :calendar: 更夫（watchman）是一款可视化的定时任务配置 Web 工具，麻麻不用担心我漏掉任何更新啦！ 项目地址: https://gitcode.com/gh_m...
ubuntu下安装watchman（react-native工具）笔记
szdenny的博客
10-17 641
1、安装依赖（注意，一定要依赖全部安装完毕，否则后面第4步可能会失败） sudo apt-get install git curl gcc g++ make libssl-dev autoconf automake libtool python-devlibboost-all-dev sudo apt-get install \ g++ \ cmake \ libboost-all-dev \ libevent-dev \ libdouble-conver...
RN_iOS项目部署流程实例
ancientear的博客
05-18 1125
这里react-native run-ios执行完一直加载，不能直接运行模拟器，可以使用xcode将原生项目打开，在xcode里能运行起来 就可以在命令行里使用run-ios。解决方案：加上sudo，sudo npm install -g react-native-cli，输入密码即可。不需要重复sudo npm install（死循环，又报错提示版本不符，猜测因为版本不是最新，因为之前有降级）如果依然不行，使用npm install --save-dev html-webpack-plugin。
React Native -1环境搭建（macOS--Android）
lamanchas的博客
02-14 438
文章目录安装依赖AndroidwatchmanJava Development Kit安装Andriod Studio安装Android SDK配置环境变量 ANDROID_HOME创建新项目在Android设备上运行应用开启USB调试通过USB数据线连接设备运行应用编译并运行 React Native 应用修改项目Hello World开始 开发平台：macOS 目标平台：Android 参考文...
Mac安装Watchman终端报Warning: You are using macOS 13.
m0_46500097的博客
09-02 2700
Mac安装Watchman终端报Warning: You are using macOS 13.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值