在Web浏览器中打开到React-Native应用程序的深度链接

时间:2019-10-23 13:23:04

标签: android react-native

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

我个人认为我没有正确配置Google标志之一。我将其保留为默认值,因为我没有发现有人提到与Internet上的深层链接相对应的标志。

我已经尝试过将节点工具添加到'android:label =“ filter_react_native”'之后的意图过滤器中

我遵循了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;

router.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中的万维网上搜索查询

1 个答案:

答案 0 :(得分:0)

解决方案非常容易。显然,如果未配置正确的chrome:// flags,则无法打开深层链接。我没有找到正确的配置,所以我用另一种方式解决了这个问题:

我刚刚建立了一个Google网站,您在其中放置了:      深度链接到应用程序

然后,我只是在手机上打开了Google网站,然后按了链接。

一个非常简单的解决方案,很难找到,因为我发现任何其他教程都只是在URL栏中键入了链接。