混合开发 React Native与Android联调
基础配置部分
解说过程是从你Native加入rn模块，新建的rn项目配置的东西都有
首先 在你的项目根目录同级开一个rn目录(这里只是举个例子)
mkdir xxx-rn && cd xxx-rn
xxx-rn就是刚才新建的文件夹
lib和project就是你原有的项目
然后下所需的包以及生成package.json文件
可能需要翻墙，或者跑tb的镜像
npm install react react-native --save
再然后就把你的js代码丢到这里就行了，丢完之后启动服务
node node_modules/react-native/local-cli/cli.js start
就是起一个node.js的服务
然后在package.json文件里添加这段脚本
&scripts&: {
&start&: &node node_modules/react-native/local-cli/cli.js start&
以后就直接 npm start就能跑 不用打一长串路径，类似于 win的环境变量
通常 rn的编译会跑 外网maven但是其实现在新版本rn发布都是走的npm，所以这些依赖都在你的&本地maven&环境里，所以需要修改主项目的build.gradle
allprojects {
repositories {
mavenLocal()
// All of React Native (JS, Obj-C sources,
binaries) is installed from npm
url &$rootDir/../node_modules/react-native/android&
一定要先mavenLocal()不然maven{}将没有效果，指向的地址其实也就是本地的&com.facebook.react.react-native&
这些都加完了ok，那再添加react-native 依赖
dependencies {
compile fileTree(dir: &libs&, include: [&*.jar&])
compile &com.android.support:appcompat-v7:23.0.1&
compile &com.facebook.react:react-native:+&
// From node_modules
至此 基本的配置就都ok了，开始搞安卓代码（这部分官网抄的）
安卓代码部分
//需要继承ReactActivity
public class MainActivity extends ReactActivity {
private ReactRootView reactRootV
//RN管理类
private ReactInstanceManager reactInstanceM
* Returns the name of the main component registered from Script.
* This is used to schedule rendering of the component.
protected String getMainComponentName() {
return &WjjPro&;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
reactRootView = new ReactRootView(this);
//初始化,这部分可以看api文档，具体字段内容还是比较多的
reactInstanceManager = ReactInstanceManager.builder()
//应用上下文
.setApplication(getApplication())
//js打包的名字
.setBundleAssetName(&index.android.bundle&)
.setJSMainModuleName(&index.android&)
//基础的各种manager
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
//初始化执行的时间
.setInitialLifecycleState(LifecycleState.BEFORE_RESUME)
reactRootView.startReactApplication(reactInstanceManager, &WjjPro&, null);
setContentView(reactRootView);
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
protected void onPause() {
super.onPause();
Log.d(&---&&,&onPause&);
if (reactInstanceManager != null) {
reactInstanceManager.onHostPause();
protected void onResume() {
super.onResume();
Log.d(&---&&,&onResume&);
if (reactInstanceManager != null) {
reactInstanceManager.onHostResume(this, this);
protected void onDestroy() {
super.onDestroy();
Log.d(&---&&,&onDestroy&);
if (reactInstanceManager != null) {
reactInstanceManager.onHostDestroy();
public void onBackPressed() {
Log.d(&---&&,&onBackPressed&);
if (reactInstanceManager != null) {
reactInstanceManager.onBackPressed();
super.onBackPressed();
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) {
reactInstanceManager.showDevOptionsDialog();
return super.onKeyUp(keyCode, event);
reactInstanceManager做了一个统筹管理，把我们Native的各种行为与rn的js页面做关联，分发以及管理
通过log明显2者的关联已经有效
例子地址：Image组件的自带属性
自定义组件并添加属性
上面的贴图中我们总结了组件属性的使用和赋值，在JSX语法中给属性赋值，值一般都是对象。比如上面的source={pic}。下面我们就来自定义一个组件并指定一个属性为name。
import React, { Component } from 'react';
Text } from 'react-native';
* 下面我们自定义一个组件Greeting 并指定一个属性名为name
class Greeting extends Component {
render() {
&Text&Hello {this.props.name}!&/Text&
上面的代码中我们创建了一个名为Greeting的组件并创建一个名为name的属性，属性通过this.props.name指定。上面的这个例子中我们在自定义组件中的render()函数中引用this.props是因为这个组件是用于展示文字用的，写在render()函数中也是为了能直接渲染在屏幕上。
使用自定义组件并给属性赋值
import React, { Component } from 'react';
AppRegistry,
} from 'react-native';
class LotsOfGreetings extends Component {
render() {
&View style={{alignItems: 'center'}}&
&Greeting name='Rexxar' /&
&Greeting name='Jaina' /&
&Greeting name='Valeera' /&
&Greeting name={'Valeera'} /&
AppRegistry.registerComponent('LotsOfGreetings', () =& LotsOfGreetings);
官网的示例代码中Greeting组件和LotsOfGreetings 组件是在同一个js文件中的，这样来对于刚入门的程序员来说看着可能会简单一些，但是你要知道不管怎么说你也是程序员，看着那么长的文件，一点都不清晰，所以即便你是新手也去养成好的编程习惯，代码拆分、分层，复用起来也方便代码也整洁清晰。下面我们简单的拆分一下。为了程序员的’尊严’我们按照如下操作去拆分js文件，并达到预期的效果：
我们将Greeting组件的js文件命名为Greeting.js 并放在index.android.js文件所在目录。
在Greeting.js文件的末尾加上下面这句：
module.exports = G
在LotsOfGreetings所在的js文件中加入下面的一行代码：(也就是在需要使用我们的Greeting的地方使用下面的代码)，然后在文件中对应使用就行了，注意是Props还是State
var Greeting = require('./Greeting');
// ES6写法
// let Greeting = require('./Greeting');
注：因为我们是新添加了js文件，所以一定要重新编译项目并运行才行，运行命令：react-native run-android
下面是完整代码：
Greeting.js文件内容：
import React, { Component } from 'react';
Text } from 'react-native';
* 下面我们自定义一个组件Greeting 并指定一个属性名为name
class Greeting extends Component {
render() {
&Text&Hello {this.props.name}!&/Text&
module.exports = G
LotsOfGreetings.js文件内容：
import React, { Component } from 'react';
AppRegistry,
} from 'react-native';
let Greeting = require('./Greeting');
class LotsOfGreetings extends Component {
render() {
&View style={{alignItems: 'center'}}&
&Greeting name='Rexxar' /&
&Greeting name='Jaina' /&
&Greeting name='Valeera' /&
AppRegistry.registerComponent('LotsOfGreetings', () =& LotsOfGreetings);
Part Three
上面说了一下Props，顺便也说了一下怎么引用自定义组件，现在回顾一下，引用组件最重要的就是把组件暴露出来，使用到的代码是：module.exports = G其次就是在引用的时候使用的代码是：let Blink = require('./Greeting');
其实React官方推荐写法是将自定义组件通过一个js文件去同意管理，也就是会提供一个main.js文件去管理我们自定义的组件。一般main.js文件内容如下：
var Component = {
自定义组件1:require('./BorderBtn/BorderBtn');
自定义组件2:require('./YYNewTopBar/YYNewTopBar');
// 然后把main.js中管理我们自定义组件的Component暴露出去
module.exports = C
上面说了Props，下面我们来说一下State，引用官方文档的一句话：Props和State来控制一个组件，Props是在父组件中指定（在Java中其实就是类中的属性），而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用State。
其实React框架将所有的UI视为一个简单的状态机，当这个状态机的状态发生改变的时候，默认的界面就会更新，这样的话我们就可以很轻松的实现数据发生变化时UI的更新（其实意思就是我们可以直接在独立的组件中通过不同的State来控制数据变化是UI的更新）。
下面我们就以官网中的例子来总结一下RN中的State：
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
setInterval(() =& {
this.setState({ showText: !this.state.showText });
render() {
let display = this.state.showText ? this.props.text : ' ';
&Text&{display}&/Text&
class BlinkApp extends Component {
render() {
&Blink text='I love to blink' /&
&Blink text='Yes blinking is so great' /&
&Blink text='Why did they ever take this out of HTML' /&
&Blink text='Look at me look at me look at me' /&
AppRegistry.registerComponent('BlinkApp', () =& BlinkApp);
上面就是组件的State–状态，一般状态的改变通常会去更新UI。官网中的说法：在实际开发中，我们一般不会在定时器函数（setInterval、setTimeout等）中来操作state。典型的场景是在接收到服务器返回的新数据，或者再用户输入数据后才会去操作state。当然，你也可以使用一些“状态容器”比如Redux来统一管理数据流（译注：但我们不建议新手过早的去学习Redux）。
注：写到现在大家应该也能发现，在Component中一般都会重写render()函数，因为一个组件肯定是有对应的UI展示的，所以一般都会重写render()函数。
本文已收录于以下专栏：
相关文章推荐
在IOS或者Android中，通常一个类都有成员变量和函数，成员变量也可以叫成员属性。在proos的例子程序中，可以把Image看成系统定义好的类或者属性，而Greeting看成是我们自己定义的一个类...
前一篇博客做了一个helloworld的简单例子。今天，继续RN之旅。学会props与state的使用之后，就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。Props:
在java中创建...
当你在React class中需要设置state的初始值或者绑定事件时
需要加上constructor(){}
constructor() {
this.state = {search...
随着React学习的愈发深入，就愈发觉得掌握props和state的使用，对于掌握React整个基础体系是有多么重要。...
state状态还是可以理解为Android，ios中一个类的成员变量，而props和state的区别是，props一经指定，就不能修改，而state是可以修改的。一般来讲，你需要在constructo...
React Native从零开始（三）Props（属性）和State（状态）
一、Props（属性）
首先官网上的介绍：...
转载请注明出处：王亟亟的大牛之路还是老规矩，先安利：/ddwhan0123/Useful-Open-Source-Android 坚持尽量每天更昨天翻了点RN的第...
前面我已经大概写了props和state 的区别
接下来整理下state的使用
需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInit...
本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6，学习在开发中常用的一些ES6的新特性，以及ES6与ES5的区别，解决大家在学习React /React ...
最近在学习react-native时候，一直会遇到this.setState()或者this.props报如下的错误：
问题描述这是什么原因导致的呢？当时都没有认真的分析该问题的发生点，一直让这个问题...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
各大平台都有对应的开发平台来提供分享与第三方登录的服务，比如微信开发平台/腾讯开发平台、新浪开发者平台等。因为各大平台及相关SDK存在很大的差异，单独集成起来比较繁琐，为了快速集成分享与第三方登录我们可以使用相应统一的服务提供商，常用的分享与登录的提供商有umeng与shareSdk。 截止目前，但各大平台与集成服务的提供方都只提供了Native版本的SDK，没有对React Native做支持，为此要在React Native应用中添加分享与第三方登录我们需要开发出能供React Native应用使用的分享与登录模块。 在这篇文章中我会向大家分享，在React Native中集分享第与三方登录功能的流程以及分享与第三方登录模块开发。(在本文中我将以umeng为例来进行讲解)
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点如果你还没有配置React Native开发环境，请访问：
Android依赖的安装需要较多的步骤，安装的方法也有很多，接下来跟着我一步步的完成Android依赖的安装吧。
一、Android依赖
关于Android依赖的安装，大概分为三个步骤
1、如何安装jdk
（1）请前往链接：
（2）按照下图点击下载
（3）下载安装完以后，在终端输入java -version
如上图所示，即表示jdk安装成功。
2、通过命令brew install android-idk安装Android SDK。
3、actual SDK stuff 、环境变量配置和AVD创建
（1）run the ‘android’ tool to install the actual SDK stuff.
执行android命令，从而打开Android SDK管理器，如下图所示，管理器将会显示出安装包的安装情况。Android SDK 管理器允许你选择开发包进行安装。PS：我用红线框起来的部分，即1、2、3、4、5必须要确保选中，然后点击install packages并接受合适的许可。等待安装完成需要花一段时间。
其中2、3、5使我们能够创建Android虚拟设备(Android Virtual Devices，AVDs)，或模拟器。
PS:安装完成后，选中安装的选项的Not installed都会变成installed
（2）add the following to your ~/.bashrc
PS：通过vi创建.bashrc文件，往文件中输入export ANDROID_HOME=/usr/local/opt/android-sdk内容保存并且退出
~/.bashrc文件保存退出后，需要执行source ~/.bashrc 让其立即生效，否则可能会出现如下bug：
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable. (PS:此处感谢RN技术交流群：中的小伙伴:qq: 昵称：蜀中阆子)
（3）通过AVD管理器创建和运行模拟器
在终端输入android avd
键盘输入enter得到AVD管理器
点击create按钮并且填写创建模拟器的相关信息，如下图所示，对于模拟器选项，记得勾选Use Host GPU
上图中，除了填好相关信息以外，确保够炫了Use Host GPU，否则模拟器会非常慢
如果愿意的话，你可以创建许多AVD。由于android设备种类繁多，有不同的屏幕尺寸，分辨率和功能，因此使用不同的模拟器通常能为测试带来帮助。当然，处于学习的目的，我们只需安装一两个即可。
二、创建新应用
你可以使用React Native命令工具来创建一个新的应用，它会为你生成一个包涵React Native、iOS和Android的全新模版工程：
这一块windows安装一般6分钟左右，因为它只支持Android，如果是mac安装，大概需要十多分钟，它同时支持iOS和Android，所以包比较大。(PS: 如果翻墙的话，iOS端一般四分钟左右)
三、将程序运行的iOS端有两种方式
通过Xcode直接打开iOS应用，运行即可。如下图所示。
先将终端、Xcode、模拟器退出，然后重启终端，在终端中切换到项目路径，再在终端中输入react-native run-ios
四、如何在Android端运行React Native程序
1、首先需要启动模拟器
启动模拟器有两种方式：
方式一：如下图所示，1终端输入android avd，输入enter启动AVD管理器，2选中模拟器，3点击Start启动模拟器
方式二：打开终端，1在终端中输入emulator -list-avds查看安装哪些模拟器，2通过emulator @模拟器名字启动模拟器
2、通过react-native run-android命令安装react native程序到Android上
PS：第一次使用react-native run-android命令时，因为需要下载很多配置文件，所以需要耐心等待，以后就不需要等待了
接下来我通过command+n新建一个终端，1首先先切换到项目路径，再在终端中输入react-native run-android命令
本文已收录于以下专栏：
相关文章推荐
概述目前RN在Android平台上不支持gif格式的图片，而在ios平台是支持的，期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎么加载gif呢？
完整实例：xport...
React Native 封装U-Share，实现第三方分享（Android，IOS双平台）
ComicBook项目参考了ComicApp的部分设计和部分代码，ComicBook是ComicApp的重构版。本项目架构清晰，代码简洁，还配套完整的视频。http://yi...
react-native-pull包含PullView & PullList两个实现下拉刷新的react native组件，可支持android & ios，简单易用！
纯js代码，基于Scroll...
本文来自:江清清的技术专栏(http://www.lcode.org)
现阶段大家在使用React Native开发项目的时候，基本都会使用到微信好友或者微信朋友圈分享功能吧，...
React.native是facebook开源基于JavaScript的框架，方便开发移动设备的app。
而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助大家掌握！...
React.native是facebook开源的一套基于JavaScript的开源框架，
很方便用来开发移动设备的app。
而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助...
React.native是facebook开源的一套基于JavaScript的开源框架，
很方便用来开发移动设备的app。
而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助...
React.native是facebook开源的一套基于JavaScript的开源框架，
很方便用来开发移动设备的app。
而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)问题描述：在iOS9下，系统默认会拦截对http协议接口的访问，因此无法获取http协议接口的数据。对ShareSDK来说，具体表现可能是，无法授权、分享、获取用户信息等。
还可能造成我们的编辑界面里传http之类的网络图片的时候，我们的编辑界面不会显示图片截图，解决的办法或者全面关闭https,允许使用http请求；或者把图片的域添加；又或者选择使用https的图片
解决方案（以下方法2选1）：
（1）、暂时退回到http协议。
具体方法：
在项目的info.plist中添加一个Key：NSAppTransportSecurity，类型为字典类型。
然后给它添加一个Key：NSAllowsArbitraryLoads，类型为Boolean类型，值为YES；
（2）、设置域。可以简单理解成，把不支持https协议的接口设置成http的接口。
具体方法：
1）、在项目的info.plist中添加一个Key：NSAppTransportSecurity，类型为字典类型。
2）、然后给它添加一个NSExceptionDomains，类型为字典类型；
3）、把需要的支持的域添加給NSExceptionDomains。其中域作为Key，类型为字典类型。
4）、每个域下面需要设置3个属性：NSIncludesSubdomains、NSExceptionRequiresForwardSecrecy、NSExceptionAllowsInsecureHTTPLoads。
均为Boolean类型，值分别为YES、NO、YES。
细节提示:在iOS9中如果使用到网络图片，也要注意网络图片是否是HTTP的哦，如果是，也要把图片的域设置哦！
各平台设置域
akamaihd.net
Google+
instagramstatic-a.akamaihd.net
Instapaper
Evernote印象笔记
& & & & &Kakao
2、大部分社交平台SDK不支持bitcode。
问题描述：iOS 9新建项目默认需要支持bitcode，而不支持bitcode的SDK会导致无法编译运行。
解决方案：
（1）、暂时关闭对bitcode的支持（建议），方法如下图
（2）、移除不支持bitcode的平台SDK。
3、添加Scheme白名单。
问题描述：在iOS 9下涉及到平台客户端跳转，系统会自动到项目info.plist下检测是否设置平台Scheme。对于需要配置的平台，如果没有配置，就无法正常跳转平台客户端。因此要支持客户端的分享和授权等，需要配置Scheme名单。
具体方法：
1）、在项目的info.plist中添加一LSApplicationQueriesSchemes，类型为Array。
2）、然后给它添加一个需要支持的项目，类型为字符串类型；
各平台OpenURL白名单说明
sinaweibo,sinaweibohd,sinaweibosso,sinaweibohdsso,weibosdk,weibosdk2.5[后两个若导入新浪SDK则需要]
TencentWeibo,tencentweiboSdkv2[控制台会提示这两个,但是腾讯微博SDK已经弃用，可以忽略不配置]
wechat,weixin
yixin,yixinopenapi
alipay,alipayshare
mqqOpensdkSSoLogin,&mqqopensdkapiV2,mqqopensdkapiV3,wtloginmqq2,mqq,mqqapi
mqzoneopensdk,&mqzoneopensdkapi,mqzoneopensdkapi19,mqzoneopensdkapiV2,mqqOpensdkSSoLogin,mqqopensdkapiV2,mqqopensdkapiV3,wtloginmqq2,mqqapi,mqqwpa，mqzone，mqq
[注:若同时使用QQ和QZONE,则直接添加本格即可]
Google+
googlechrome,&googlechrome-x-callback,hasgplus4,com.google.gppconsent,com.google.gppconsent.2.2.0,com.google.gppconsent.2.3.0,com.google.gppconsent.2.4.0,com.google.gppconsent.2.4.1
renrenapi,renrenios,renreniphone,renren,以及在使用人人SDK时所需配置的URL
Scheme,例如:rm226427com.mob.demoShareSDK
pocket-oauth-v1
KaokaoStory
非平台类，如短信，复制，邮件等
1.在iOS9中，如果没有添加上述白名单，系统会打印类似如下提示:&
.-canOpenURL: failed for URL: “sinaweibohdsso://xxx” – error: “This app is not allowed to query for scheme sinaweibohdsso”(如下图)
如没有添加相关白名单，有可能导致分享失败，例如不会跳转微信，不会跳转QQ等。
2.添加完上述所需的名单,系统依然会打印类似信息：&
.-canOpenURL: failed for URL: “sinaweibohdsso://xxx” – error: “null”
这是系统打印的信息，目前是无法阻止其打印，即无法消除的
3.上述白名单，是技术人员通过不断的测试收集整理所得，如果各位开发者朋友发现上表格有所遗漏，请根据系统信息添加相关白名单即可。
如果没有设置白名单的话，系统的打印信息如图所示:
添加完后，系统是依然会打印的，不过error会变成null:
本文已收录于以下专栏：
相关文章推荐
阅读1511 评论0 喜欢9
控制台输出
如图是在我启动一个 Xcode 7 + iOS 9 的 App 之后，控制台的输出。
这在 Xcode 6.4 + ...
Xcode报错:
-canOpenURL: failed for URL: "weixin://app/*************/" - error: "This app is not allow...
17:29:53.761 l[] -canOpenURL: failed for URL: "weixin://app//" - error: "(null)...
如果报错信息“This app is not allowed to query for scheme weixin”
那么需要在info.plist中添加两个地方
一、在URL typ...
友盟微信分享出现：
-canOpenURL: failed for URL: "weixin://app/wxff569fXX/" - error: "This app is not...
var ua = navigator.userAgent.toLowerCase();
1.判断是否是微信
function isWeixinBrowser() {
控制台输出
如图是在我启动一个 Xcode 7 + iOS 9 的 App 之后，控制台的输出。
这在 Xcode 6.4 + iOS 8 时，是不会有的情况，原因是【为了强制增强...
控制台输出
如图是在我启动一个 Xcode 7 + iOS 9 的 App 之后，控制台的输出。
这在 Xcode 6.4 + iOS 8 时，是不会有的情况，原因是【为了强制增强...
key>LSApplicationQueriesSchemeskey>
string>mqqOpensdkSSoLoginstring>
string>mqzonestr...
转载 /ios/15.html
==========================================...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}