React-Native Component（543）
使用React Native，可以使用NetInfo API获取手机当前的各个网络状态。
componentWillMount() {
NetInfo.fetch().done((status)=& {
console.log('Status:'+status);
获取网络状态是异步的,上面使用了Promise机制。
Android端网络状态
请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段，申请相关权限：
&uses-permission android:name=&android.permission.ACCESS_NETWORK_STATE& /&
修改完成后，reaload代码是无效的，因为我们修改了Android原生的配置文件，需要重新执行react-native run-android命令。这个命令重新编译对应的Android项目安装包并安装到手机中。
*Android可获取的状态比较多，上面的status可能有如下的值，直接把文档贴出来了：
NONE - 设备处于离线状态
BLUETOOTH - 蓝牙数据连接
DUMMY - 模拟数据连接
ETHERNET - 以太网数据连接
MOBILE - 移动网络数据连接
MOBILE_DUN - 拨号移动网络数据连接
MOBILE_HIPRI - 高优先级移动网络数据连接
MOBILE_MMS - 彩信移动网络数据连接
MOBILE_SUPL - 安全用户面定位（SUPL）数据连接
VPN - 虚拟网络连接。需要Android5.0以上
WIFI - WIFI数据连接
WIMAX - WiMAX数据连接
UNKNOWN - 未知数据连接
*IOS端网络状态
none - 设备处于离线状态。
wifi - 设备处于联网状态且通过wifi链接，或者是一个iOS的模拟器。
cell - 设备是通过Edge、3G、WiMax或是LTE网络联网的。
unknown - 发生错误，网络状况不可知
监听网络改变事件
在获取了网络状态后，开发者还可以通过NetInfo API提供的监听器，监听网络状态改变事件。这样当手机网络状态改变时，React Native应用马上收到通知。
.fetch().done((status)=& {
.log('Status:' + status);
.addEventListener('change', this.handleConnectivityChange);
.log(&componentWillUnMount&);
.removeEventListener('change', this.handleConnectivityChange);
(status) {
.log('status change:' + status);
判断是否有网络连接
NetInfo API 为开发者提供了isConnected函数用来判断当前手机是否有网络连接。
NetInfo.isConnected.fetch().done((isConnected) =& {
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
isConnectionExpensive(仅Android端)
NetInfo API为开发者提供了 isConnectionExpensive函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络，或者通过基于移动数据网络所创建的wifi热点，都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。
NetInfo.isConnectionExpensive((isConnectionExpensive) =& {
console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
链接：/p/fa
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1795809次
积分：20056
积分：20056
排名：第428名
原创：117篇
转载：1777篇
评论：85条
(109)(98)(101)(99)(137)(209)(392)(324)(117)(150)(5)(25)(88)(86)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'在设备上运行注意在iOS设备上运行React Native应用需要一个并且把你的设备注册为测试设备。本向导只包含React Native相关的主题。
译注：从XCode 7起，在自己的设备上调试App不再需要开发者账户了。
从设备访问开发服务器
在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上查看结果。这样做的前提是你的电脑和设备必须在同一个wifi环境下。
打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
修改里面的URL，把localhost改为你的电脑的IP。在Mac系统下，你可以在系统设置/网络里找到电脑的IP地址。
在XCode里选中你的设备作为运行目标，然后点击“Build and Run”。
摇晃设备来打开开发菜单(重新加载、调试，等等……)
使用离线包
当你在真机上运行app时，所有的JavaScript代码和图片都会自动打包到App内部。这样可以脱离开发服务器运行，并最终提交到AppStore进行发布。
打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
取消注释jsCodeLocation = [[NSBundle mainBundle] ...这一行。
根据你的app选择的scheme的不同，会生成不同的离线包（Debug会生成带有警告的开发模式的包，Release则会生成压缩优化过的包）。要修改scheme的话，选择Xcode顶部菜单中的Product & Scheme & Edit Scheme...，在Build Configuration选项中切换选择Debug或是Release。
禁用应用内的开发者菜单
当我们发布应用之前，你应该把应用的“Schema”设置为Release，来禁用开发者菜单。文档讲述了一些详细的操作方式。
快速入门使用指南使用指南(iOS)使用指南(Android)组件API接口兼容(POLYFILLS)React Native中文网.(C) 2017 杭州欧石南网络科技有限公司浙ICP备号-3浙公网安备 11号主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
你只管努力，剩下的交给时光！
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：
我们非常享受Enzyme为React.js应用提供的快速组件级UI测试功能。与许多其他基于快照的测试框架不同，Enzyme允许开发者在不进行设备渲染的情况下做测试，从而实现速度更快、粒度更小的测试。在开发React应用时，我们经常需要做大量的功能测试，而Enzyme可以在大规模地减少功能测试数量上做出贡献。React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章