android - 在网络浏览器中打开深度链接到 React-Native 应用程序

Question

我一直在尝试通过我的 Android 手机(模拟器和心理设备)上的网络浏览器打开应用程序。每当我将“mydeeplink://people/0”作为 URL 时，它就会开始在谷歌上搜索查询而不是打开应用程序。

我个人认为我没有正确配置其中一个 Google 标志。我将其全部保留为默认值，因为我没有发现任何人提到与互联网上的深层链接相对应的标志。

我已经尝试在“android:label="filter_react_native"”之后将节点工具添加到 intent-filter

我遵循了 this website 中的教程, 然而它似乎已经过时了

这是我的代码:

AndroidManifest.xml:

     <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.mydeeplink">

<uses-permission android:name="android.permission.INTERNET" />

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter android:label="filter_react_native" 
     android:autoVerify="true">
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="mydeeplink" android:host="people" />
  </intent-filter>
  </activity>
  <activity 
  android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

 </manifest> 

index.android.js:

 // index.ios.js or index.android.js
 import { AppRegistry } from 'react-native';
 import Router from './router';
 AppRegistry.registerComponent('mydeeplink', () => Router);

home.js:

import React from 'react';
import { Platform, Text, Linking } from 'react-native';
class Home extends React.Component {
static navigationOptions = { // A
title: 'Home',
};
componentDidMount() { // B
 if (Platform.OS === 'android') {
  Linking.getInitialURL().then(url => {
  this.navigate(url);
});
} else {
  Linking.addEventListener('url', this.handleOpenURL);
}
}

componentWillUnmount() { // C
Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL = (event) => { // D
this.navigate(event.url);
}
navigate = (url) => { // E
const { navigate } = this.props.navigation;
const route = url.replace(/.*?:\/\//g, '');
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split('/')[0];

if (routeName === 'people') {
  navigate('People', { id, name: 'chris' })
};
}
render() {
return <Text>Hello from Home!</Text>;
}
}
export default Home;

路由器.js:

       import React from 'react';
 import {
    AppRegistry,
    Text,
    }  from 'react-native';

  import { createStackNavigator } from 'react-navigation-stack';
  import { createAppContainer } from 'react-navigation';
  import Home from './home';
  import People from './people';
  const Router = createStackNavigator(
   {
      Home: Home,
      Details: People,
   },
   {
       initialRouteName: 'Home',
   }
 ) ;


const AppContainer = createAppContainer(Router);

export default class App extends React.Component{
     render(){
         return <AppContainer/>
     }
  }

预计会打开我的 React-Native 应用程序并打开 Leela 的图片。目前查询只是在 google chrome 的万维网上搜索查询作为物理设备的模拟器

Answer 1

解决方案非常简单。显然，如果不配置正确的 chrome://flags，就无法打开深层链接。我没能找到正确的配置，所以我用另一种方式解决了这个问题:

我刚刚建立了一个谷歌网站，你把: 深层链接到应用

然后我简单地在手机上打开了谷歌网站并按下了链接。

非常简单的解决方案，很难找到，因为我找到的任何其他教程只需在 URL 栏中键入链接即可。