在iOS 与Android上实现React Native应用的尝试链接

添加 src/screens/Article.tsx

import React from 'react' 
 
import { StyleSheet, Text, View } from 'react-native' 
 
import { NavigationScreenComponent } from 'react-navigation' 
 
interface NavigationParams { 
  id: string 
} 
 
const ArticleScreen: NavigationScreenComponent<NavigationParams> = ({ navigation }) => { 
  const { params } = navigation.state 
 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.title}>Article {params ? params.id : 'No ID'}</Text> 
    </View> 
  ) 
} 
 
ArticleScreen.navigationOptions = { 
  title: 'Article', 
} 
 
export default ArticleScreen 
 
const styles = StyleSheet.create({ 
  container: {}, 
  title: {}, 
}) 

配置 iOS

打开 ios/DeepLinkingExample.xcodeproj：

open ios/DeepLinkingExample.xcodeproj 

点击 Info Tab 页，找到 URL Types 配置，添加一项：

• identifier：deep-linking
• URL Schemes：deep-linking
• 其它两项留空

打开项目跟目录下的 AppDelegate.m 文件，添加一个新的 import：

#import "React/RCTLinkingManager.h" 

然后在 @end 前面，添加以下代码：

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { 
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; 
} 

至此，我们已经完成了 iOS 的配置，运行并测试是否成功。

react-native run-ios 

打开 simulator 之后，打开 Safari 浏览器，在地址栏中输入：deep-linking://article/4 ，你的应用将会自动打开，并同时进入到 Article 页面。

同样的，你还可以在命令行工具中执行以下命令：

xcrun simctl openurl booted deep-linking://article/4 

配置 Android

要为Android应用也创建 External Linking，需要创建一个新的 intent，打开 android/app/src/main/AndroidManifest.xml，然后在 MainActivity 节点添加一个新的 intent-filter：

<application ...> 
  <activity android:name=".MainActivity" ...> 
    ... 
    <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:scheme="deep-linking" /> 
    </intent-filter> 
    ... 
  </activity> 
</application> 

Android 只需要完成上面的配置即可。

执行：

react-native run-android 

打开系统浏览器，输入：

deep-linking://article/4 

系统会自动打开你的应用，并进入 Article 页面

也可以在命令行工具中使用以下命令打开：

adb shell am start -W -a android.intent.action.VIEW -d "deep-linking://article/3" com.deeplinkingexample; 

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!