产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: 微信开放平台 QQ 开放平台 微博开放平台 第一步 安装: 在你的项目路径下执行命令: npm install jshare-react-native --save npm install jcore-react-native --save react-native link 第二步:配置…

关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: 微信开放平台 QQ 开放平台 微博开放平台 第一步:安装 npm install jshare-react-native --save npm install jcore-react-native --save react-native link 第二步:配置 如果 link 失败,则需要进行手动…

最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-native --save npm install jcore-react-native --save react-native link 第二步 配置: ReactNative iOS 端配置步骤在插件中自动完成,无需额外的配置. 第三步 使用 接下来在 JS 文件中只要导入 JAnalyticsM…

关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics-react-native --save npm install jcore-react-native --save react-native link 执行完上述命令后,使用 Android Studio 打开你的项目. 第二步 配置: 2.1 配置 settings.gradle 执行完 link 命令后,…

常识 React native 开发服务器 在开发时,我们的框架是这样的:  当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内.这时,已经不再需要开发服务器的支持了. npm npm,全称是 node package manager,顾名思义最开始是作为 Node 的包管理器存在的.不过经过不断的发展和壮大,现在的 npm 早就不再局限于 Node 的范畴,已经成为 Javascript 的包管理器,看看下面的 npm 常见命令: npm inst…

React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 一,应用申请审核 大家需要去微信开发平台去注册账号并且创建一个移动应用.(地址:https://open.weixin.qq.com),然后根据流程申请即可.但是需要注意的是Android需要获取签名信息: 下载安装上面的签名信息包apk,然后在上面输入android项目的包名,点…

React Native之通知栏消息提示(ios) 一,需求分析与概述 详情请查看:React Native之通知栏消息提示(android) 二,极光推送注册与集成 2.1,注册 详情请查看:React Native之通知栏消息提示(android) 2.2,集成(ios) 第一步:安装 打开终端,进入项目根目录文件夹下,执行以下命令: 1 npm install jpush-react-native --save 2 jpush-react-native 1.4.2 版本以后需要同时安装 j…

引言      现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了,下面切入正题正式开始介绍. 1.ShareSDK开发包及配置 这个不用多说,去他们官网看找SDK开发包和集成文档即可.Android版本地址:http://www.mob.com/downloadDetail/ShareSDK/android.注意:记得要注册ShareSDK账号获取AppKey哦…

React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是:weixin:// 二,URL Scheme介绍 2.1,URL Scheme是什么? URL Scheme是一种页面内跳转协议,是一种非常好的实现机制,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面:通过scheme协议,服务器可以定制化告诉App跳转那个页面,可以通过通知栏…

关于在react-native中快速集成umeng统计,网上的文章或者教程基本来自----贾鹏辉老师的文章http://www.devio.org/2017/09/03/React-Native-Integrated-analysis-function/或者是umeng的官方文档 可能是因为react-native版本问题(这里我使用的react-native为0.58),又或者是因为我装的android-studio版本比较新,总之搞了半天,虽然集成上去了,但是只能称之为简陋版吧,因为自定义事…

今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationController. iOS原生端: 1.AppDelegate.h // 创建一个原生的导航条 @property (nonatomic, strong) UINavigationController *nav; AppDelegate.m 修改部分代码: // 初始化Nav _nav = [[UINavi…

在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/docs/integration-with-existing-apps/ 但是会有一些步骤报错,这里记录一下.首先我的项目结构是这样: RNTEST 是最外面的文件夹的名字,也是iOS项目的名字.ios/  下是iOS项目文件. npm安装RN依赖都没问题,按照官网步骤来 最主要的是 cd ios p…

React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Navigator,NavigatorIOS也就不是什么难事了. 本文所使用的是React Native 0.34.FB团队更新的太快了,我会在后续出现大的改动的时候更新本文以及代码. Navigator基础 Navigator在不同的Scene之间跳转. initialRoute对象 这是Navigator所…

React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法. 本文分文三个部分:一.效果展示:二.实现步骤:三.注意事项: 一.效果展示 二.实现步骤 1.微信开放平台申请移动应用(需要缴纳300元/年费用),配置开发信息,应用包名和签名一定要填对,如图: 2.配置“React-Native-Wechat”组件,配置RN项目: React-Native-Wechat项目…

(一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 本文主要会涉及到以下内容: 微信开发者应用申请审核 安装配置微信分享库 微信好友/朋友圈功能实现 (二)应用申请审核 首先大家需要去…

前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.Android的步骤: 请参考链接:https://github.com/syanbo/react-native-agora 提示:因为Agora的库有两个版本,必须采用最新版,以免有些功能不支持(笔者在集成时,当时没有注意,有不少折腾呢) 使用记录: 不知道怎么开头写的时候,参考官方Demo : htt…

列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React from 'react'; import { Text, View, ListView } from 'react-native'; export default class DemoList extends React.Component { constructor(props) { super(p…

从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真是让人郁闷了. 坑 什么叫Button.略去各种细节可以得出一个定义:可以处理用户点击,在用户按下的时候有按下的效果,松开之后立即回复到原来的效果上. 在React里,可以使用直接使用HTML的元素.比如,<button />或者<input type="button"…

用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Native APP. 在本文中我将为大家讲解如何打包和发布React Native iOS App. 第一步:导出js bundle包和图片资源 和打包React Native Android应用不同的是,我们无法通过命令一步进行导出React Native iOS应用.我们需要将JS部分的代码和图片资源等…

最近,在项目DYTT集成了热更新,简单来说,就是不用重新下载安装包即可达到更新应用的目的,也不算教程吧,这里记录一下. 1.热更新方案 目前网上大概有两个比较广泛的方式,分别是 react-native-pushy react-native-code-push 前者是由ReactNative中文网推出的代码热更新服务,后者是由微软老大哥推出的,当然不仅仅是为React Native,还包括其他原生方式. 综合考虑之下,选择了react-native-code-push. 2.安装code-pus…

flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误.在js开发的过程中,总会遇到一些问题.小的还可以,比如用alert或者console等输出一些信息可以debug,并解决.但是如果项目比较大的时候,这些手法只能起到一定的辅助作用.更有甚者,有些问题不运行到那段代码,根本不会发现错误.Facebook…

代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN的填坑之旅系列,发现一路写下来都是我在开发中遇到的问题如何解决的.兴之所至,不问顺序.于是出现一个问题,填坑系列和学习知识的顺序不是很一致.比如今天要说的布局问题.其实在一个app开发之前,就应该有所了解.否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢?上来就…

1.下载所需的jar,下载地址https://developer.umeng.com/sdk/reactnative?spm=a211g2.211692.0.0.28967d238GW6mC 2.将以下jar放入,你的android/app/libs中,(这里可以参考我之前分享的集成友盟统计的流程:https://www.cnblogs.com/songdongdong/p/10684327.html) 3.在你的DplusReactPackage.java中添加ShareModule @Ove…

React 可以看做是连接native与JavaScript的桥梁bridge: 实现用js语言时间app的开发: 即使你不知道native是什么:…

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android…

比较精细的动画可以用Animated来控制.但是,在一些简单的界面切换.更新的时候所做的动画里再去计算开始值.结束值和插值器如何运作绝对是浪费时间. RN正好给我们提供了LayoutAnimation来解决这个问题.按照官方的说法:LayoutAnimation就是用于在下一个绘制或者布局周期(render/layout cycle)里处理界面中全部视图的动画的. 下面看一个例子: export default class DemoLayoutAnimation extends React.Co…

React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置可查看React Native之微信分享(iOS Android),这里主要介绍的是支付方面的配置 第一步:创建名为'wxapi'的文件夹,并在文件夹内创建WXPayEntryActivity.java,用于获得微信的授权和支付权限. package your.package.wxapi; impo…

今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不同,这里只介绍本猿的环境版本. 2.名称的一致性 1.首先,使用终端命令新建一个React Native项目待用;新建一个文件夹ReactComponent,把刚才新建的React Native项目中的index.ios.js和package.json和node_modules文件夹及其下属文件全都…

写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分"入门"包括第19章,介绍ReactNative框架的基本原理与使用方法:第2部分"进阶"包括第1015章,介绍ReactNative框架的高阶开发与App部署相关知识.附录部分剖析了ReactNative的源码,可帮助读者研究ReactNative底层本质,还分享了一些React…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…