React Native Expo 应用程序：深度链接回应用程序

Question

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

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

我尝试了这些深度links。他们从我公司的登录页面调用，将用户送回应用程序：

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

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

本地主机 link 即使在用户第一次完成登录时无需再次下载捆绑包也能正常工作。但它仍然崩溃并显示相同的警告。

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

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

Answer 1

缺少导入：

import Constants from 'expo-constants';

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

Answer 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);
      }

我希望这对以后的人有所帮助。

React Native Expo 应用程序：深度链接回应用程序

React native expo app: deeplinking back into the app

react-native

expo

react-native-deep-linking