IOS
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Linking,
TouchableHighlight,
View
} from 'react-native';
class CustomButton extends Component {
constructor(props) {
super(props);
}
static propTypes = {
url: React.PropTypes.string,
text: React.PropTypes.string.isRequired,
};
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={() => Linking.canOpenURL(this.props.url).then(supported => {
if (supported) {
Linking.openURL(this.props.url);
} else {
console.log('无法打开该URI: ' + this.props.url);
}
}) }>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class LinkingDemo extends Component {
componentDidMount() {
var url = Linking.getInitialURL().then((url) => {
if (url) {
console.log('捕捉的URL地址为: ' + url);
}else{
console.log('url为空');
}
}).catch(err => console.error('错误信息为:', err));
}
render() {
return (
<View>
<CustomButton url={'http://www.reactnative.vip'} text="点击打开http网页"/>
<CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
<CustomButton url={'smsto:13667377378'} text="点击进行发送短信"/>
<CustomButton url={'tel:13667377378'} text="点击进行打电话"/>
<CustomButton url={'mailto:309623978@qq.com'} text="点击进行发邮件"/>
<CustomButton url={'dfy:888999'} text="无法打开url"/>
<CustomButton url={'geo:37.484847,-122.148386'} text="点击打开一个地图位置"/>
<CustomButton url={'dfy://reactnative.vip/data'} text="自己打开自己"/>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
margin: 5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
},
buttonText:{
fontSize:20,
},
});
AppRegistry.registerComponent('LinkingDemo', () => LinkingDemo);
Android
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Linking,
TouchableHighlight,
View
} from 'react-native';
class CustomButton extends Component {
constructor(props) {
super(props);
}
static propTypes = {
url: React.PropTypes.string,
text: React.PropTypes.string.isRequired,
};
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={() => Linking.canOpenURL(this.props.url).then(supported => {
if (supported) {
Linking.openURL(this.props.url);
} else {
console.log('无法打开该URI: ' + this.props.url);
}
}) }>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class LinkingDemo extends Component {
componentDidMount() {
var url = Linking.getInitialURL().then((url) => {
if (url) {
console.log('捕捉的URL地址为: ' + url);
}else{
console.log('url为空');
}
}).catch(err => console.error('错误信息为:', err));
}
render() {
return (
<View>
<CustomButton url={'http://www.reactnative.vip'} text="点击打开http网页"/>
<CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
<CustomButton url={'smsto:13667377378'} text="点击进行发送短信"/>
<CustomButton url={'tel:13667377378'} text="点击进行打电话"/>
<CustomButton url={'mailto:309623978@qq.com'} text="点击进行发邮件"/>
<CustomButton url={'dfy:888999'} text="无法打开url"/>
<CustomButton url={'geo:37.484847,-122.148386'} text="点击打开一个地图位置"/>
<CustomButton url={'dfy://reactnative.vip/data'} text="自己打开自己"/>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
margin: 5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
},
buttonText:{
fontSize:20,
},
});
AppRegistry.registerComponent('LinkingDemo', () => LinkingDemo);
AndroidManifest.xml配置
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.linkingdemo"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<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" />
<!-- Accepts URIs that begin with "dfy://reactnative.vip/data�� -->
<data android:scheme="dfy"
android:host="reactnative.vip"
android:pathPrefix="/data" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
Linking提供了一个通用的接口来与传入和传出的App链接进行交互。
方法：
1.addEventListener(url,func) 添加一个监听Linking变化的事件
2.removeEventListener(url,func) 删除一个事件监听
3.openURL(url) 尝试使用设备上已经安装的应用打开指定的url
http网址：http://www.reactnative.vip
https网址：https://www.baidu.com
发短信：smsto:13667377378
打电话：tel:13667377378
发邮件：mailto:309623978@qq.com
发位置：geo:37.484847,-122.148386 这个不一定看地图处理应用而定
打开其他应用监听的意图url
4.canOpenURL 判断设备上是否有已经安装的应用可以处理指定的URL 对于iOS 9以上版本，你还需要在Info.plist中添加LSApplicationQueriesSchemes字段
5.getInitialURL() 如果应用是被一个链接调起的，则会返回相应的链接地址。否则它会返回null。
注：如果要在Android上支持深度链接，请参阅http://developer.android.com/tra ... ml#handling-intents
意图过滤器需要单独列出：
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Accepts URIs that begin with "http://www.example.com/gizmos” -->
<data android:scheme="dfy"
android:host="reactnative.vip"
android:pathPrefix="/data" />
</intent-filter>
能否通过adb启动activity：adb shell am start -n com.linkingdemo/.MainActivity
测试是否能用url的形式打开app对应的activity：adb shell am start -W -a android.intent.action.VIEW -d "dfy://reactnative.vip/data" com.linkingdemo
IOS
首先我们需要在AppDelegate.m文件中引入RCTLinkingManager.h头文件，那么就需要我们引入相关配置了，关于库的引入默认项目都默认已经配置好的，但是我们需要配置一个库头文件搜索路径
