频道导航

【转】 React-Native调用浏览器和第三方APP

2020-06-15 React 前端之家

前端之家收集整理的这篇文章主要介绍了【转】 React-Native调用浏览器和第三方APP，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

这个其实在RN的文档中已经写好了，不过最新的依然不需要做文档中的额外步骤。

直接在自定义的组件里面引用Linking，然后使用Linking的openURL函数即可，这个会自动选择系统的浏览器打开链接。

@H_502_8@ [javascript] view plain copy

print ?

varurl=‘http://www.baidu.com’;
Linking.openURL(url)
.catch((err)=>{
console.log(’Anerroroccurred’,err);
});

var url = 'http://www.baidu.com';
     Linking.openURL(url)
     .catch((err)=>{
       console.log('An error occurred',err);
     });

还可以使用canOpenURL做一次判断，是否是有效的地址，然后根据判断进行上面的操作：

@H_502_8@ [javascript] view plain copy

print ?

Linking.canOpenURL(url)
.then((supported)=>{
if(!supported){
console.log(’Can\’thandleurl:’+url);
Alert.alert(
’提示’,
’Can\’thandleurl:’+url,
[
{text:’OK’,onPress:()=>{}}
]
);
}else{
returnLinking.openURL(url);
}
})
.catch((err)=>{
console.log(’Anerroroccurred’,err);
Alert.alert(
’提示’,
’Anerroroccurred:’+err,
[
{text:’OK’,onPress:()=>{}}
]
);
});

Linking.canOpenURL(url)
    .then((supported)=>{
      if (!supported){
        console.log('Can\'t handle url: ' + url);
        Alert.alert(
          '提示','Can\'t handle url: ' + url,[
            {text: 'OK',onPress:()=>{}}
          ]
        );
      }else{
        return Linking.openURL(url);
      }
    })
    .catch((err)=>{
      console.log('An error occurred',err);
      Alert.alert(
        '提示','An error occurred: ' + err,[
          {text: 'OK',onPress:()=>{}}
        ]
      );
    });

后面发现文档中说了这么一句话：

你还可以使用其他类型的URL，比如一个地理位置（形如”geo:37.484847,-122.148386”或是一个通讯录名片，只要是可以通过{@code Intent.ACTION_VIEW}打开的即可。

也就是说这个Linking可以打开更多的东西，然后参考了IOS的openURL，试了下打开App Store，通讯录等等，结果是令人满意的，都可以打开。

因此，在你做的APP中，如果需要用户跳转到App Store中对你的应用进行评价的话，也可以这样做：

@H_502_8@ [javascript] view plain copy

print ?

varurl=‘itms-apps://’;
url=’itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?mt=8&onlyLatestVersion=true&pageNumber=0&sortOrdering=1&type=Purple+Software&id=APP_ID’;
//后面有个APP_ID，填写个人的APP_ID就可以跳转到评论地址了
Linking.canOpenURL(url)

var url = 'itms-apps://';
    url = 'itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?mt=8&onlyLatestVersion=true&pageNumber=0&sortOrdering=1&type=Purple+Software&id=APP_ID';
    //后面有个APP_ID，填写个人的APP_ID就可以跳转到评论地址了

    Linking.canOpenURL(url)

上面这个是在网上看到的，itms-apps:// 打头的就是指的APP Store，还有其他的可以参考这个地址。这里详细列出了各种常用系统应用的url头。

注意：如果按照这个方式无法打开，按照官方文档上说的要在项目的Info.list中设置LSApplicationQueriesSchemes字段

具体这个如何添加，网上也有资料，可以自行搜索下。

原文链接：
http://blog.csdn.net/pz789as/article/details/53021283

上一篇：Dva React 入门 Demo 篇章 2 下一篇：使用react-native-image-crop-pick

猜你在找的React相关文章

react使用moment进行日期格式化

导入moment 使用方式年月日，时分秒星期几相对时间 7天后 2小时后明天将毫秒转换成年...

作者：前端之家时间：2021-02-16

推荐使用并手写实现redux-actions原理

@ 一、前言为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...

作者：前端之家时间：2020-12-30

【译】值得推荐的十大React Hook 库

十大React Hook库原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...

作者：前端之家时间：2020-12-30

React生命周期

React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...

作者：前端之家时间：2020-12-19

React虚拟DOM的理解

React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...

作者：前端之家时间：2020-12-19

使用react-native-vector-icons（RN0.6+）

1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...

作者：前端之家时间：2020-12-02

React中的Props, State 与 render 函数

React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...

作者：前端之家时间：2020-11-07

React开发环境准备

react fiber 指react 16以上的版本引入react的方式： 1、引入.js文件 2、使用脚手架工具（...

作者：前端之家时间：2020-11-07

React组件拆分与传值

组件拆分与组件之间的传值父子组件的概念：父组件通过属性的方式，向自组件传值子组件通...

作者：前端之家时间：2020-11-07

React组件的简单演示

src/Test.js import React from 'react'; function Test() { return ( &a...

作者：前端之家时间：2020-11-07

最新文章