自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
React-Native 入门指导系列教程目录
二、项目介绍与调试
三、CSS样式与Flex布局
四、常用UI控件的使用
五、JSX在React-Native中的应用
六、事件与数据调用
七、自定义组件
八、动手写实例
九、发布与真机调试
1. 什么是React-Native？
　　React-Native是：Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
　　React Native的原理是：在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以&View&取代&div&，以&Image&替代&img&等。
2.React-Native有啥优缺点？
　　优点是：能够用JavaScript脚本就可以写出App的界面，对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
和其他的移动Web框架相比：
Native不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题；
Native的原生控件有更好的体验；
Native有更好的手势识别；
Native有更适合的线程模型；
　　缺点是：还在试用阶段，潜在的问题尚不得而知：兼容性问题，性能问题等。还没大量普及，学习资料尚且不多，供爱折腾的朋友尝尝鲜。
3.成功案例有哪些？
　　那么，现在有哪些公司在用这个新出来的技术呢？据了解，有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
　　天猫iPad客户端&猜你喜欢&业务，支付宝新一代的框架基于React；携程网App部分新业务；去哪儿网给航空公司用的收益辅助系统；百度图片搜索无线的新首页，部分试水；Quip 最好用的在线文档协作工具&&
4.要学些什么？
　　想必，大家已经按耐不住，会发问，使用React-Native开发要学习些什么呢？
Html+CSS+JavaScript的基本功肯定是少不了；
Node.js的基本概念学习。API文档：
JSX: JavaScript语法的一个扩展，类似XML结构。
FLUX: Facebook公司的一个创建用户客户端web程序的框架。
　　好了，废话不多，直入正题吧。
1. 硬件条件
　　你需要一台Mac电脑，或者是安装了OSX系统的电脑，这是iOS App开发的前提。
2. 软件条件
(1). 安装最新版的XCode，建议是XCode7.1及以上版本。（PS: 如果不是最新版，可能在之后新建项目的时候，会编译通不过。小编就是之前没把XCode升级到最新版，然后被一个编译问题困扰了很久。）
(2). 安装HomeBlew（OS系统上的一个安装包管理器，安装后可以方便后续安装包的安装。）
终端命令：
ruby -e "$(curl -fsSL /Homebrew/install/master/install)"
(3). 安装Node.js （服务端的JavaScript运行环境）
下载地址：
成功安装后，终端会有如下提示信息：
Node.js was installed at: /usr/local/bin/node ?
npm was installed at: /usr/local/bin/npm ?
Make sure that /usr/local/bin is in your $PATH.
(4). 建议安装WatchMan（React修改source文件的一个工具）
终端命令：&
brew install watchman
(5). 安装Flow: 一个JavaScript 的静态类型检查器。
终端命令：
brew install flow
(6). 安装React Native CLI: 用来开发React Native的命令行工具
终端命令：
npm install -g react-native
装好了环境，就可以愉快的玩耍起来了。
创建项目1. 新建一个项目
　　新建一个&HelloWorld&的项目，每个语言的开始教程都是这个，我们也不例外。
操作超级简单，只需终端输入命令行：
react-native init HelloWorld&
2. 运行项目
　　创建的项目包含Andriod和iOS两个版本，我们这边就先介绍iOS的操作。(Andriod的操作也大同小异，无非就是编译的环境不同，js文件中的内容和写法都是通用的。学会了iOS的用法，再研究Andriod下的React-Native开发，会很轻松。)
　　用XCode打开ios/HelloWorld.xcodeproj文件，点击键盘"?-R&或者点击"Run"，编译运行项目。会启动React-Native服务和iOS模拟器。
　　在iOS模拟器中可以看到如图界面：
　　React-Native服务在编写过程中要一直开着，如图：
　　如果不小心把它关了，没关系，可以在终端输入：
来重新开启服务。
　　安装谷歌的Chrome Developer Tools，具体使用方法，在之后的教程中会再具体介绍。
参考文章：
　　好了，看到这里，如果你已经成功配置了React-Native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个React-Native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。
　　在接下来的一篇文章中，我会和大家一起来具体看看自动新建项目中包括的内容，以及每个文件中具体写法和作用。
附上facebook官方的教程网站地址，供大家研究学习：
阅读(...) 评论()
随笔 - 16184
评论 - 14026753人阅读
全栈工程师（7）
重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。
支付宝支付
接入支付宝支付前建议先查看 ，先按照要求创建应用并完成配置。不过要注意以下两点：
第一，App支付不能在沙箱做测试，所以我们需要先 “上线” 应用，这个过程会有1天的审核时间。
第二，调试时建议添加个一分钱的商品作为测试商品，开发免不了要支付几次。
支付宝支付我们使用了ReactNative社区推荐的
模块，可以使用 npm 安装
npm install react-native-yunpeng-alipay --save
最新版 React Native (&=0.31) 已经支持 link 命令，不需要再使用三方的 rnpm来 link 引用了。
react-native link react-native-yunpeng-alipay
这个操作会把 react-native-yunpeng-alipay 模块下的客户端模块自动映射到 ReactNative工程的对应的 IOS和 Android目录里。 注意，自动link并不是万能的，有些模块我们需要再手动添加一些引用。
对于IOS端，除了上面的link操作之外，我们还需要手动做下面的三件事：
添加Frameworks和Libraries
打开xcode，TARGET -& General -& Linked Frameworks and Libraries ，添加
CoreMotion.framework
CoreTelephony.framework
URL Schema
打开 Info.plist，添加一项URL types：
打开 AppDelegate.m，添加一个函数来触发支付完成后的回调
#import "AlipayModule.h"
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
[AlipayModule handleCallback:url];
return YES;
Android端配置
Android端配置比较简单，除了上面的link操作外，我们还需要修改Manifest文件
修改Manifest
在商户应用工程的AndroidManifest.xml文件里面添加声明：
android:name="com.alipay.sdk.app.H5PayActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" &
android:name="com.alipay.sdk.auth.AuthActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" &
和权限声明：
android:name="android.permission.INTERNET" /&
android:name="android.permission.ACCESS_NETWORK_STATE" /&
android:name="android.permission.ACCESS_WIFI_STATE" /&
android:name="android.permission.READ_PHONE_STATE" /&
android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&
添加混淆规则
在商户应用工程的proguard-project.txt里添加以下相关规则：
-libraryjars libs/alipaySDK-.jar
-keep class com.alipay.android.app.IAlixPay{*
-keep class com.alipay.android.app.IAlixPay$Stub{*
-keep class com.alipay.android.app.IRemoteServiceCallback{*
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*
-keep class com.alipay.sdk.app.PayTask{ public *
-keep class com.alipay.sdk.app.AuthTask{ public *
Action封装
我们的App开发采用的是redux框架，为了方便使用，我把支付宝支付封装成了Action，你可以参考一下。
* @desc 三方支付
* @author Jafeney
* @detetime 2016-11-08
import Alipay from 'react-native-yunpeng-alipay'
import * as CONFIG from '../config'
export function alipay(opt) {
return (dispatch) =& {
const uri = `http:`;
/*支付接口*/
const headers = {
...CONFIG.HEADERS,
Authorization: opt.token
/*调用支付接口*/
fetch(uri, {method: 'POST', headers: headers, body: JSON.stringify(opt.body)})
.then((response) =& {
if (response.status === 200) {
return response.json()
return {code: response.status}
.then((data) =& {
if (String(data.code) == '0') {
/*打开支付宝进行支付*/
Alipay.pay(data.result).then((data) =& {
if (data.length && data[0].resultStatus) {
/*处理支付结果*/
switch (data[0].resultStatus) {
case "9000":
opt.success && opt.success(data)
case "8000":
opt.fail && opt.fail('支付结果未知,请查询订单状态')
case "4000":
opt.fail && opt.fail('订单支付失败')
case "5000":
opt.fail && opt.fail('重复请求')
case "6001":
opt.fail && opt.fail('用户中途取消')
case "6002":
opt.fail && opt.fail('网络连接出错')
case "6004":
opt.fail && opt.fail('支付结果未知,请查询订单状态')
opt.fail && opt.fail('其他失败原因')
opt.fail && opt.fail('其他失败原因')
}, (err) =& {
opt.fail && opt.fail('支付失败，请重新支付')
opt.error && opt.error('支付参数错误')
@欢迎关注我的
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：234865次
积分：3209
积分：3209
排名：第11300名
原创：92篇
转载：13篇
评论：49条
(3)(2)(1)(1)(1)(1)(3)(1)(2)(5)(5)(2)(4)(2)(3)(7)(41)(13)(1)(7)(1)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'&&&&&&&&终于把微信好友分享和朋友圈分享的功能打通了，现在就我的做法，以及遇到的一些坑，写下来供大家参考：
&&&&&&&&一、首先我们新建一个RN的项目，写好你的好友分享和朋友圈分享布局，后面我们要调用微信的接口，然后把项目安装到android手机上，后面我们要用签名软件查看签名；
&&&&&&&&二、去微信的开放平台注册开发者账号（https://open./），然后登陆进去：进入管理中心-移动应用（可以创建10个移动应用），
如下图所示，我的已经有一个了，这个应用的代码在github上（/LiuC520/react-native-jifenmao），每天在更新内容，今天把百度地图和微信的分享功能增加了上去。
&&&&&&&&2.1、然后创建移动应用，输入应用名称和简介，需要准备两张图标，一个是28*28像素，仅支持PNG格式，大小不超过300KB；另一个是108*108像素，仅支持PNG格式，大小不超过300KB。
&&&&&&&&我的图片都是自己用AI和PS做出来的
&&&&&&&&&&&&2.2、下一步，填写应用官网、在android和ios上打钩，android的签名和包名、ios的Bundle
&&&&&&&&2.2.1、其中Bundle
ID在Xcode中查看，点击项目名-General-Bundle Identifier，如下图所示：
Bundle Identifier就是Bundle ID,
&&&&&&&2.2.2、&android的包名：打开项目中的android-app-src-main的AndroidManifest.xml的package包名，如下图所示：
&&&&&&&&2.2.3、android的签名：进入到微信开放平台的资源中心-资源下载-android资源下载-签名生成工具，
安装到手机上，打开软件，输入上面的包名，生成签名，填写到微信开放平台中：
，然后提交审核。
审核通过后，
&&&&&&&&三、打开终端，输入 npm install react-native-wechat --save,
3.1、下载后，输入 react-native link，添加依赖
3.2、打开xcode，点击项目名--&Build Phases --&Link Binary With Libraries,点击下面的加号添加下面的依赖：
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
3.3、然后点击项目名--&info --&
URL Types，输入Identifier和URL Schemes（这个就是微信通过的appid），
3.4、对于ios9，进入
&&info&&&Custom
iOS Target Properties，添加LSApplicationQueriesSchemes（Array类型），然后增加两个item，值分别为wechat和weixin，如下图所示：
3.5、xcode打开项目的AppDelegate.m文件，
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
3.6、xcode打开项目的AppDelegate.m文件中添加导入文件：
#import &RCTLinkingManager.h&
3.7、打开项目--&Build
Settings --&Header Search Paths ,双击右侧的值，添加两个路径：
$(SRCROOT)/../node_modules/react-native-wechat/ios
$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS
&&&&&&&&四、android的配置：
4.1、打开android/settings.gradle添加
include ':RCTWeChat'project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
4.2、打开android/app/build.gradle，在dependencies代码块内添加：
compile project(':RCTWeChat')
// Add this line only.
4.3、打开android-app-src-main-java-com-包名下的MainApplication.java，添加如下代码：
import com.theweflex.react.WeChatPackage;
在getPackages()&方法内添加：&new WeChatPackage(),
如果是react-native link过的话，以上的应该会自动添加的。
4.4：在你的包名下新建一个包名“wxapi”，然后新建一个文件“WXEntryActivity.java”,把下面的代码拷贝进去：
package your.package.wxapi;import android.app.Activity;import android.os.Bundle;import com.theweflex.react.WeChatModule;public class WXEntryActivity extends Activity{
protected void onCreate(Bundle savedInstanceState) {
& &super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
其中跟上面的代码中的your.package，是你的包名也就是前面在微信的android里面填写的包名，
4.5、然后在AndroidManifest.xml中的application标签内添加如下的代码：
&!-- 微信Activity --&
android:name=&.wxapi.WXEntryActivity&
android:label=&@string/app_name&
android:exported=&true&
4.6、如果要混淆的话，需要打开android --& app --&proguard-rules.pro,添加如下代码：
-keep class com.tencent.mm.sdk.** {
五、打开你的RN项目，在项目里面注册微信的接口：
componentDidMount (){
wechat.registerApp('your appid')
六、在你的方法里面填写下面的代码：
shareToTimeline是分享到朋友圈的方法，shareToSession&是分享给朋友或者群的方法，
其中title是分享时显示的标题，description是描述的内容体，webpageurl点击后打开的链接，
thumbImage，这个是分享时左侧现实的图片，
imageUrl，这个和webpageurl类似，是分享的图片地址，
videoUrl这是分享的视频地址
musicUrl这是分享的音乐地址
filePath这是分享文件地址，可以分享文件
fileExtension，这个是分享的文件的后缀，如果分享的是doc文档，如：fileExtension：‘.doc’;
此外还有监听的方法：addListener(eventType,
listener[, context])
还可以付款，不过要开通，付费的，我这儿没有开通：
&let result = await WeChat.pay(
& & &partnerId: '', // 商家向财付通申请的商家id
& & &prepayId: '', // 预支付订单
& & &nonceStr: '', // 随机串，防重发
& & &timeStamp: '', // 时间戳，防重发
& & &package: '', // 商家根据财付通文档填写的数据和签名
& & &sign: '' // 商家根据微信开放平台文档对数据做的签名
&console.log('Pay for success!');
} catch (error) {
&console.log('Pay for failure!');
七、运行效果图如下：
八、注意：填坑：android手机在进行进行操作的时间，如果出现点击图标，打不开微信的好友分组或者朋友圈，一闪而退，需要重启下手机，然后再重新打开。
本文已收录于以下专栏：
相关文章推荐
react-native-wechat 具有微信 登录，分享， 收藏， 和支付的功能，适合iOS/Android 双平台使用
安装与配置
通过yarn 安装
yarn add reac...
前言对于原生应用开发而言，调用系统匹配的应用进行分享是非常常见操作，今天我们来看一下，RN中如何封装这一个操作的。方法RN中存在一个模块Share, 即为调用匹配的app进行分享操作。在iOS中，通过...
function shareFriend() {
WeixinJSBridge.invoke('sendAppMessage',{
Android分享到微信好友、朋友圈
标签： Android开发微信分享
21:41 610人阅读 评论(0) 收藏 举报
 分类：
最权威的学习资料还是要去看官网，以及官网提供的Demo，基本上你是可以直接拿来使用的，这是官网网站：http://open./。
         在微信分享中主要碰到了如...
使用微信官方自带的SDK实现文字信息分享记得用 填写在微信开放平台的签名 打包public static void shareText(int sceneFlag) {
// 初始化一个...
尊重版权,未经授权不得转载
本文来自:江清清的技术专栏(http://www.lcode.org)
现阶段大家在使用React Native开发项目的时候，基本都会使用到...
写在前面上一篇简单地讲了 ReactNative 如何接入支付宝支付，那么这一篇就介绍如何接入微信API吧。我们实际用到的一般有微信登录、微信分享、微信支付这三个功能。准备工作微信的东西比较支付宝申请...
通过js直接跳转到微信和QQ等软件进行分享
重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下...
他的最新文章
讲师：汪剑
讲师：刘道宽
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)> 博客详情
上一弹讲了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的部分很多已经不再需要。
从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 。也可选择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 /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
& 启动 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 * /facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = R
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.环境需求
OS X - 本向导假设您的操作系统是OS X，因为这是开发iOS应用所必须的。
推荐使用Homebrew 来安装Watchman和Flow
安装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应用！
扫一扫，关注 全栈技术 公众号
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥