我的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;
不幸的是,这不起作用。如有任何帮助,将不胜感激。
谢谢。