我的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方法,但链接道具中没有任何道具。
我尝试了许多不同的事情。我真的很陌生,所以我知道我可能在做一些根本错误的事情。我猜我在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;
不幸的是,这没有用。任何帮助将不胜感激。
谢谢。