react-native-deep-linking 一个 React Native 路由匹配用于处理 deep links 的库 安装 这个包已经发布到 npm 上面去了： npm install react-native-deep-linking...更多相关的信息可以参考：https://facebook.github.io/react-native/docs/linking.html 用法 引入 DeepLinking import DeepLinking...from 'react-native-deep-linking'; 注册 schemes DeepLinking.addScheme('example://'); 新增事件监听 import { Linking...} from 'react-native'; Linking.addEventListener('url', handleUrl); const handleUrl = ({ url }) =>...StyleSheet, Text, View } from 'react-native'; import DeepLinking from 'react-native-deep-linking';
- 3、之后使用brew安装工具： brew install watchman flow git gcc pkg-config cairo libpng jpeg gitlab-ci-multi-runner...sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash ``` 安装后还不能马上使用..."$NVM_DIR/nvm.sh" # This loads nvm 之后就可以使用nvm安装多个node.js版本共存了，例如安装： nvm install v4.2.3 之后设置使用该版本 nvm...alias default v4.2.3 这样就可以使用node.js版本是4.2.3了 5、点击React Native 环境搭建 从第三步再继续
iOS iOS打开设置还是比较简单的，使用Linking组件即可： Linking.openURL('app-settings:') .catch(err => console.log('error.../src/main/java/com//文件夹下创建opensettings文件夹 2、在这个文件夹下创建模块文件OpenSettingsModule.java（模块功能）和包文件...; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactMethod...com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext...new OpenSettingsPackage() /* <---- add here */ ); } 6、准备工作完成，接下来调用： import { NativeModules } from 'react-native
微信分享，找开源组件库(react-native-wechat),下面是具体的使用方法。...一、进入到项目的目录中执行如下命令: $ npm install react-native-wechat --save 二、IOS:打开你的Xcode工程 2.1 从node_modules/react-native-wechat...注：具体的可以参考facebook官网的方法http://facebook.github.io/react-native/docs/linking-libraries-ios.html) 2.2 添加一下库文件...如果类型是video,提供一个视频 {string} musicUrl 如果是audio,提供一个音乐 {string} filePath 提供本地文件 以下例子需要'react-native-wechat...'和'react-native-fs'组件 import * as WeChat from 'react-native-wechat'; import fs from 'react-native-fs'
一、原生与RN通信 先做点准备工作叭~ 通过react-native init创建一个RN的新项目，此后将会得到一个内部带有ios和android目录的文件夹。把这两个目录下的文件换成自己的项目。.../node_modules/react-native/third-party-podspecs/Folly.podspec' 1、 原生跳RN页面 RCTRootView是一个可以将RN视图封装到原生组件中并且提供联通原生和被托管端接口的...：Deep linking 1）RN配置导航容器，使其能够从传入应用程序的 URI 中提取路径。...中，设置info->URL Type为mychat 二、打包 1） 导出js bundle包和图片资源 终端进入RN项目的根目录下创建文件夹，此处名为release_ios react-native...AFN弹出提示：“未能找到使用指定主机名的服务器”。也就是说RN并未调起js server。 确保mac和手机连的是同一网络之后，去xCode中搜索域名.xip.io。发现并没有这个文件。
随着 React Native 的不断发展完善，越来越多的公司选择使用 React Native 替代 iOS/Android 进行部分业务线的开发，也有不少使用 Hybrid 技术的公司转向了 React...而就在前不久，苹果严禁WaxPatch、JSPatch等热修复框架，不过庆幸的是采用Js热更新的React Native似乎并可没有收到多大影响。...热更新作为React Native的优势之一，相信很多人在选择使用React Native来开发应用，也是因为React Native具有的热更新特性。...热更新实现方案 当下选择使用 React Native 的项目大都是基于原有项目的基础上进行接入，即所谓的混合开发，而这些混合的代码中，为了不增加带代码的难度（理解和维护难度），也只是将部分非核心的代码...Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [ {text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL
在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器...这篇文章重点介绍原生浏览器插件的开发与使用 二：实现思路分析 原生浏览器插件是需要实现打开默认浏览器和打开自定义浏览器，具体的实现思路如下： 新建WebviewManager类，实现自定义浏览器 新建...添加React Native跟控制器 如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下： // Webview.m #import "Webview.h" #import...声明被JavaScript 调用的方法 React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。...根据传参打开浏览器 此浏览器插件支持打开自定义浏览器和打开默认浏览器，具体使用哪种方法打开浏览器，需要JavaScript通过arguments字典以字段的形式传过来，这里就使用openType字段。
前言 最近做了第一个用react-native写的app,记录下相关第三方插件的配置 关于微信分享，主要用到了这两个库 react-native-wechat-lib react-native-wechat...更新相关微信SDK等 备注：本文使用rn版本为0.61.5 步骤 申请微信相关 去微信官方网址https://open.weixin.qq.com/,注册移动应用，填写相关信息，获取到相关到key 其中需要注意到是...react-native-wechat-lib,找到依赖下的该包，打开ios文件夹，将RCTWeChat.xcodeproj 导入进来 [z9la7vfu14.png] 在工程Build Phases...Links', ); 封装wxHandle.js处理微信分享逻辑 import * as WeChat from 'react-native-wechat-lib'; import CommonConfig...集成微信分享记录 参考链接：react-native-wechat （react-native 微信分享、支付)
前言 最近做了第一个用react-native写的app,记录下相关第三方插件的配置 关于微信分享，主要用到了这两个库 react-native-wechat-lib react-native-wechat...更新相关微信SDK等 备注：本文使用rn版本为0.61.5 步骤 申请微信相关 去微信官方网址https://open.weixin.qq.com/,注册移动应用，填写相关信息，获取到相关到key 其中需要注意到是...我们使用的是react-native-wechat-lib,找到依赖下的该包，打开ios文件夹，将RCTWeChat.xcodeproj 导入进来 ?...:sourceApplication annotation:annotation]; } rn代码中使用 在项目开始文件中， import * as WeChat from 'react-native-wechat-lib...（react-native 微信分享、支付)
前言 目前使用一键分享比较主流的两个SDK：ShareSDK、友盟； 又因为友盟功能比较多且比较全，比如说友盟统计、友盟推送等，所以本文重点介绍的是友盟分享功能在rn上的应用以及要注意的点。...react native绑定SDK两种方案（一个原理）： 1.自己去要绑定的SDK官网下载SDK包，按照SDK安装指南分别在android/iOS上按步骤配置，然后在RN注册Package和Module...实现RN和原生之间的通讯； 2.使用别人已经写过的Package和Module+SDK本身的配置，直接拿到rn项目中用； 总结：可以看出来第二种其实是比较偷懒的方式，但是可以实现功能，而且Package...和Module的书写几乎一样都是大同小异的代码（除了Module暴露调用方法的顺序不同之外），所以如果市面上已经有相应的绑定大可直接拿来使用。...一键分享实现方案 我们本文要使用的友盟分享库是：react-native-share GitHub地址：https://github.com/songxiaoliang/react-native-share
使用react-native的时候能够看到不少函数调用式的组件，像LinkIOS用来呼起url请求 LinkIOS.openUrl('http://www.163.com'); actionSheetIOS...，通过声明一个native module，然后在这个组件内部通过底层实现方法的具体内容 像ActionSheetIOS在使用的时候，首先需要在工程的pod库中添加ActionSheetIOS对应的RCTActionSheet...pod 'React', :path => 'node_modules/react-native', :subspecs => ['Core','RCTActionSheet'# Add any other...module ，然后具体的实现方法放在RCT_EXPORT_METHOD开头的函数内 RCT开头的宏用来区分react-native函数与原声的函数，jspatch的bang有过具体分析，感兴趣的可以看看...http://blog.cnbang.net/tech/2698/ 所以我们自己实现一个原生的react-native组件的时候，完全可以照着actionSheetIOS来做 在前端自定义一个js，通过
创建`React-Native`项目 ``` react-native init dounineApp ``` 2....在项目根目录添加`react-native-code-push` ``` npm install react-native-code-push --save #或者 yarn add react-native-code-push...rnpm-install info Linking react-native-code-push android dependency rnpm-install info Android module...react-native-code-push has been successfully linked rnpm-install info Linking react-native-code-push...在`react-native`的`App.js`文件添加自动更新代码 ``` import codePush from "react-native-code-push"; const codePushOptions
下游可以使用： React Native CLI：RN 官方开发/打包工具； expo：不需要搭建 iOS 和 Android 开发环境，工程目录干净清爽，添加 RN 依赖方便快捷； haul：第三方...等依赖后开箱即用； 只需要专注页面 UI 和业务领域模型的实现，所有编译配置，框架运行所需 HOC 和 Context Provider 全部由 umi 搞定； 路由方案默认使用 umi 内置的react-router...UMIRNExample 在 RN 工程根目录下使用 yarn 添加umi和umi-preset-react-native依赖： yarn add umi umi-preset-react-native...umi-preset-react-native 扩展配置 umi-preset-react-native会探测用户工程内的依赖，自动为下列工具生成所需的配置文件和入口文件。...案例：持久化导航状态 RN 工程根目录下app.js文件： // app.js import { Linking, Platform, Text } from 'react-native'; /**
Navigation 使用 在你使用navigation的每一个界面navigation都提供相关的属性和响应方法，常见的有： navigate 定义跳转到另一个页面 调用此方法去链接你的其他界面...Visual Option(视觉选项): ·mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项： 1) card-使用标准的iOS和Android的界面切换，...react-native-tab-navigator ?...直接上代码： /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import...Native页面参数传递 react-native-tab-navigator封装
截止目前，但各大平台与集成服务的提供方都只提供了Native版本的SDK，没有对React Native做支持，为此要在React Native应用中添加分享与第三方登录我们需要开发出能供React Native...第三步：构建分享及登录模块 为了能够在React Native中使用umeng分享及登录，我们需要为刚才导出的sdk创建一个Native 模块然后通过桥接的方式供js部分进行调用，关于如何开发React...sdk，如果要在React Native中进第三方登录，只需要在上述代码中添加下面的代码即可，方法和调用分享是一样的，有需要的朋友可以参考登录集成来添加一下。...result) { // 其他如支付等SDK的回调 } return result; } 通过这里查看实现分享与第三方登录的视频教程 第四步：分享模块的使用 到目前为止呢，我们的iOS...另外也可以关注我的新浪微博，或者关注我的Github来获取更多有关React Native开发的技术干货。 参考：React Native开发视频教程
(1) 使用react-native-linear-gradient：https://github.com/react-native-community/react-native-linear-gradient...(2) 让设计直接提供渐变的背景图片，简单粗暴 3.React-Native的阴影实现方案 （1）借助react-native-shadow模块实现（需要引入其他原生代码） （2）借助react-native-shadow-card...模块实现（不需要引入其他原生代码） （3）自己实现，通过shadowOpacity等原生属性单独实现对IOS的兼容，通过elevation属性单独实现对Android的兼容，实际上这也是react-native-shadow-card...的做法 （4）让设计直接提供阴影的背景图片，简单粗暴 4.Animated插值的用法 插值映射的时候，outputRange可以是一个 “数字 + 特殊字符”的形式，例如 outputRange: ['...Image的长度定义最好使用固定的px，如果使用比例控制长度的话，会遇到不太好处理的情况 9.
在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器...这篇文章重点介绍原生密码键盘插件的开发与使用 二：实现思路分析 原生密码键盘插件是需要实现自定以键盘包含数字、大写字母、小写字母、特殊字符四种切换方式，并且需要实现随机键盘和非随机键盘模式。...实现根据密码包含数字、大写字母、小写字母、特殊字符种类判断密码强度和长度。 为了密码的安全考虑，实现对输出密码进行SM3加密。...声明被JavaScript 调用的方法 React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。...、字母及数字特殊字符、仅数字、仅字母。
调用微信、支付宝等客户端完成支付的功能。 三方应用调用系统所带的地图软件。...示例： 接下来就以我之前写的UIActivityViewController系统原生分享-仿简书分享和iOS开源小项目-WSL两个Demo为例，让我们看下怎么可以让UIActivityViewController...success) { }]; } 通过浏览器打开唤起WSL，测试一下，输入的地址是" WSLAPP://wslmeiksjkfdfkfkfhskfhskfhskj "（Url Scheme://+ 参数字符串...IBAction)shareToWSL:(id)sender { //不带参数 NSString * wslUrlScheme = @"WSLAPP://"; //如果参数含有特殊字符或汉字...，需要转码，否则这个URL不合法，就会唤起失败；参数字符串的格式可以自定义，只要便于自己到时候解析就行 NSString * parameterStr = [@"name=wsl&weight=
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
