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

看效果吧：