代码之家 › 专栏 › 技术社区 › Aaron Balthaser

反应导航-将道具传递到导航器

react-navigation react-native reactjs javascript

Aaron Balthaser · 技术社区 · 6 年前

我的React原生应用程序有几个条件,当用户单击邀请的链接时,它需要处理深层链接。我的目的是在主app.js文件中设置链接侦听器,当检测到深度链接时,我需要将数据传递到Splash视图中,以确定几个因素,然后再将用户添加到邀请他们加入的组中。

我正在使用React导航。我最初试图通过用url数据更新存储来使用redux,但在更新redux之前加载启动页时遇到了时间问题。因此,我尝试为导航器创建一个HOC包装,如下所示:

临时链接器:

import * as React from "react";

const Linker = (Component) => {
    return ({ children, ...props }) => {
        return (
            <Component { ...props }>
                { children }
            </Component>
        );
    }
};

export default Linker;

在我的App JS文件中,我导入链接器并用HOC组件包装主导航器。然后我添加了一个道具,当React Native Linking method检测到深层链接时,道具会被更新。它用参数更新状态。

应用程序JS:

import Navigator from './ui/navigation/navigator';
const LinkerWrapper = Linker(Navigator);

render() {
    return (
        <LinkerWrapper linking={this.state.url} />
    );
}

我的导航器文件如下所示:

导航器:

import { createSwitchNavigator } from 'react-navigation';

import Splash from '../screens/splash/splash';

import AuthStack from './auth';
import AppStack from './app';

const Navigator = createSwitchNavigator({
  Loading: Splash,
  Auth: AuthStack,
  App: AppStack
});

export default Navigator;

当我单击应用程序按预期打开的深层链接时,我将解析url并准备数据对象,状态将更新,启动页将按预期重新呈现,道具将通过HOC传递,但是当componentWillReceiveProps方法在启动页中运行时,我看不到来自链接道具的任何道具。

我试过很多不同的东西。我真的是新的反应,所以我知道我可能做了一些根本性的错误。我猜我在React导航中遗漏了一些东西。我尝试的一件事是将屏幕值更改为传递道具的函数。我希望这会神奇地使链接道具出现在启动页道具。以下是我的尝试:

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';

import Splash from '../screens/splash/splash';

import AuthStack from './auth';
import AppStack from './app';

const Navigator = createSwitchNavigator({
    Loading: {
        screen: props => <Splash { ...props }/>
    },
    Auth: AuthStack,
    App: AppStack
});

export default Navigator;

不幸的是,这不起作用。如有任何帮助,将不胜感激。

谢谢。