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);
看效果吧: