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

时间:2018-10-13 15:26:08

标签: javascript reactjs react-native react-navigation

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

我正在使用React Navigation。我最初尝试通过使用url数据更新商店来使用redux,但是由于在更新redux之前加载了Splash页面时遇到了计时问题。因此,我尝试为导航器创建HOC包装,如下所示:

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方法检测到深层链接时更新的道具。它使用参数更新状态。

App 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方法,但链接道具中没有任何道具。

enter image description here

我尝试了许多不同的事情。我真的很陌生,所以我知道我可能在做一些根本错误的事情。我猜我在React Navigation中缺少了一些东西。我尝试的一件事是将屏幕值更改为传递道具的函数。我希望这能神奇地使链接道具出现在“启动页面”道具中。以下是我的尝试:

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;

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

谢谢。

0 个答案:

没有答案