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

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

  •  2
  • 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方法在启动页中运行时,我看不到来自链接道具的任何道具。

    enter image description here

    我试过很多不同的东西。我真的是新的反应,所以我知道我可能做了一些根本性的错误。我猜我在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;
    

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

    谢谢。

    0 回复  |  直到 6 年前