在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

（编辑：台州站长网）

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