React native之IntentAndroid学习

IntentAndroid是RN提供的一个通用接口来调用外部链接，IntentAndroid有如下方法：

static openURL(url: string) 
根据给定的URL启动对应的应用。

static canOpenURL(url: string,callback: Function) 
判断是否有已安装的应用可以处理传入的URL。

static getInitialURL(callback: Function) 
如果当前应用是通过深度链接和{@code Intent.ACTION_VIEW}调起的，则此方法会返回这个链接的值，否则返回null

编写OpenURLButton组件

在index.android.js相同目录下，新建一个openurl.js文件，内容如下：

'use strict';

var React = require('react-native');
var {
  IntentAndroid,StyleSheet,Text,TouchableNativeFeedback,AppRegistry,View,ToastAndroid,} = React;

var OpenURLButton = React.createClass({

  propTypes: {
    url: React.PropTypes.string,},handleClick: function() {
    IntentAndroid.canOpenURL(this.props.url,(supported) => {
      //判断当前uri是否可以打开
      if (supported) {
        IntentAndroid.openURL(this.props.url);
      } else {
        ToastAndroid.show("不能识别当前uri",ToastAndroid.SHORT);
      }
    });
  },//返回当前button组件显示的视图，这里是一个TouchableNativeFeedback
  render: function() {
    return (
      <TouchableNativeFeedback  onPress={this.handleClick}> <View style={styles.button}> <Text style={styles.text}>Open {this.props.url}</Text> </View> </TouchableNativeFeedback> ); } }); var styles = StyleSheet.create({ container: { flex: 1,backgroundColor: 'white',padding: 10,paddingTop: 30,button: { padding: 10,backgroundColor: '#3B5998',marginBottom: 10,text: { color: 'white',}); // 导出当前OpenURLButton组件 module.exports = OpenURLButton;

编写测试应用

这里，我编写了一个简单的测试应用，其androidManifest.xml主要内容如下：

<activity  android:name="com.example.htmllauncher.MainActivity" android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data  android:host="haha" android:pathPrefix="/open" android:scheme="testapp" />
            </intent-filter>
  </activity>

具体可以参考我之前的博客：android中通过浏览器启动nativeAPP

使用OpenURLButton组件

这里，由于将OpenURLButton单独使用文件进行封装，所以代码量就较少了，index.android.js内容如下：

'use strict';

var React = require('react-native');
var {
  AppRegistry,} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var OpenURLButton = require('./openurl');

var secondProject = React.createClass({

  render: function() {
    return (
      <UIExplorerBlock title="Open external URLs"> <OpenURLButton url={'https://www.baidu.com'} /> <OpenURLButton url={'testapp://haha/open'} /> <OpenURLButton url={'testapp://haha/open?name=lisi&age=30&from=ucbroswer'} /> <OpenURLButton url={'testapp://AA/BB'} /> </UIExplorerBlock> ); },}); AppRegistry.registerComponent('secondProject',() => secondProject);

看效果吧：