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);

看效果吧：