Question

我正在创建一个允许用户使用Instagram登录的应用程序。现在我理解的登录程序如下：

在Instagram Developer注册应用程序作为客户端以获取client_id等。
使用您的client_id调用Instagram URL并获取grant_code
将grant_code发送回Instagram（我将从后端执行此操作）以获取访问令牌。

This StackOverFlow Question我遇到了同样的问题。我从答案中理解我需要深层链接，以便我可以将它作为redirect_uri提供给Instagram，以便在登录后重定向回我的应用程序。

现在我无法让Deep Linking工作。以下是应用正在侦听URL的组件。

应用程序中最顶级的组件

import React, { Component } from 'react';
import { Linking } from 'react-native';

import Router from './Router';

class App extends Component {
  componentDidMount() {
    Linking.getInitialURL().then(url => {
      if (url) {
        console.log(`Initial url is ${url}`);
      }
    })
    .catch(err => {
      console.error(err);
    });

    Linking.addEventListener('url', this.handleOpenURL);
  }

  componentWillUnmount() {
    Linking.removeEventListener('url', this.handleOpenURL);
  }

  handleOpenURL(event) {
    console.log(event.url);
  }

  render() {
    return <Router />;
  }
}

export default App;

Android Manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.numu"
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"
        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">
            <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.numu.com/app” -->
            <data android:scheme="http"
                  android:host="www.numu.com"
                  android:pathPrefix="/app" />
            <!-- Accepts URIs that begin with "numu://app” -->
            <data android:scheme="numu"
                  android:host="app" />
        </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

这是我的路由器组件

import { StackNavigator } from 'react-navigation';

import LoginPage from './components/LoginPage';
import IntroText from './components/IntroText';

const RouterComponent = StackNavigator({
  LoginPage: { screen: LoginPage, path: 'login' },
  IntroText: { screen: IntroText, path: 'intro },
});

export default RouterComponent;

这是我目前的进展。我一直在测试，在我的Chrome浏览器（移动设备）中输入http://www.numu.com/app/intro和numu：// app / intro，但应用程序没有打开。

如果有人能告诉我这种方法的替代方案，我也很感激。我为此尝试了一个包。它还要求我提供redirect_uri

由于

React Native Deep Linking Android

应用程序中最顶级的组件

Android Manifest.xml

这是我的路由器组件

0 个答案: