React native expo 应用程序：深度链接回应用程序答案

【问题标题】：React native expo app: deeplinking back into the appReact native expo 应用程序：深度链接回应用程序
【发布时间】：2021-03-26 13:48:35
【问题描述】：

我是 react native 初学者，我使用最新版本的 react-native 和 expo 创建了应用程序。该应用程序以expo go 在 iPhone 和 android 上启动，我可以通过单击按钮启动网络浏览器。网络浏览器显示我公司的登录页面，成功登录后，用户应在特定屏幕上重定向到应用程序，其中包含我需要在我的应用程序中继续的值（下面的代码 sn-p 中的值“myCode”）。

但深度链接实际上打开了我的应用程序的一个新实例（从 expo 服务器再次下载捆绑包），而不是仅仅将已经运行的应用程序带到前台。然后当我再次启动登录过程时，深层链接会打开我的应用程序而无需再次下载应用程序，但是当我尝试处理重定向时立即崩溃，但出现以下异常：“找不到变量：常量”。我真的不明白这个错误，想得到帮助。如果您知道如何在 react-native 中使用 Linking，您可能可以帮助我。

我尝试了这些深层链接。从我的公司登录页面调用它们以将用户发送回应用程序：

exp://127.0.0.1:19000/success?code={mycode}

exp://fa-p2b.<myExpoUser>.test.exp.direct:80/success?code={mycode}

即使没有在用户第一次完成登录时再次下载捆绑包，本地主机链接也能正常工作。但它仍然因同样的警告而崩溃。

这是我用来处理重定向回应用程序的代码：

export default class StartScreen extends React.Component {
    state = {
        redirectData: null,
    };

    render() {
        return (
            <TouchableOpacity onPress={_openBrowserAsync}>
                    <Image
                        source={require('../assets/button.png')}
                        style={{ width: 200, height: 100 }}
                    />
                </TouchableOpacity>
        );
    }
};

_openBrowserAsync = async () => {
    try {
        this._addLinkingListener();
        let result = await WebBrowser.openBrowserAsync(
            `https://mycompany.com/login`
        );

        if (Constants.platform.ios) {
            this._removeLinkingListener();
        }

        this.setState({ result });
    } catch (error) {
        alert(error);
        console.log(error);
    }
};

_handleRedirect = (event) => {
    alert("handle redirect")
    alert(event.url)
    alert("passed eventurl")
    if (Constants.platform.ios) {
        WebBrowser.dismissBrowser();
        alert("dismissedBrowser")
    } else {
        alert("_removeLinkingListener")
        this._removeLinkingListener();
        alert("_removeLinkingListener")
    }
    alert("parse")
    let data = Linking.parse(event.url);
    alert("parse")
    this.setState({ redirectData: data });
    alert("setState")
};

_addLinkingListener = () => {
    Linking.addEventListener("url", this._handleRedirect);
};

_removeLinkingListener = () => {
    Linking.removeEventListener("url", this._handleRedirect);
};

_maybeRenderRedirectData = () => {
    if (!this.state.redirectData) {
        return;
    }

    return (
        <Text style={{ marginTop: 30 }}>
            {JSON.stringify(this.state.redirectData)}
        </Text>
    );
};

在用户登录函数_handleRedirect 被调用后，我看到第一个警报来自 alert("handle redirect") 但随后它因Can't find variable: Constants 而崩溃

代码基本上取自这里： https://github.com/expo/examples/blob/master/with-webbrowser-redirect/App.js

【问题讨论】：

标签： react-native expo react-native-deep-linking

【解决方案1】：

缺少导入：

import Constants from 'expo-constants';

-> 解决了常量警告。（我不习惯即使缺少导入也能编译的编程语言，这就是为什么我被困在这个简单的事情上）之后，深层链接也起作用了。

【讨论】：

【解决方案2】：

我设法通过以不同方式处理 iOS 和 Android 用例解决了这个问题：

      if (EXPOCONSTANTS.platform.ios) {
        result = await WebBrowser.openAuthSessionAsync(u_r_l);
        saveToken(result.url);
      }else{
        result = await WebBrowser.openBrowserAsync(u_r_l);
      }

我希望这对将来的人有所帮助。

【讨论】：