typescript - 与 react-navigation v5 的深度链接
问题描述
我正在尝试在带有反应导航的反应原生项目中使用深层链接,但我在两个平台(ios 和 android)中都遇到了一些奇怪的场景。
我的代码 NavigationContainer
const linking = {
prefixes: ['https://latineo.com', 'latineo://'],
config: {
Home: {
path: 'homestack',
initialRouteName: 'Explore',
screens: {
Explore: 'explore',
Posts: 'posts',
Favorites: 'favorites',
Settings: 'settings',
},
},
ExploreOptions: {
path: 'explorestack',
initialRouteName: 'Restaurants',
screens: {
Restaurants: 'rts',
ShowRestaurants: 'restaurants',
ShowRestaurant: 'restaurant/:id',
},
}
},
};
<NavigationContainer
theme={navigatorTheme}
ref={(nav: any) => {
navigator = nav;
NavigationService.setNavigator(navigator);
}}
linking={linking}
fallback={<LoadingIndicator
size='giant'
></LoadingIndicator>}
onStateChange={(nav) => {
console.log("AppNavigator -> nav", nav)
}}
>
{isAuth && <HomeNavigator />}
{!isAuth && didTryAutoLogin && didOnboard && didPermission && <AuthNavigator />}
{!isAuth && didTryAutoLogin && !didOnboard && <OnboardScreen />}
{!isAuth && didTryAutoLogin && didOnboard && !didPermission && <LocationPermissionScreen />}
{!isAuth && !didTryAutoLogin && <IsAuthScreen />}
</NavigationContainer>
主页导航器
const Stack = createStackNavigator<HomeParamList>();
export const HomeNavigator = (): React.ReactElement => {
return (
<Stack.Navigator
initialRouteName={'Home'}
headerMode='none'
>
<Stack.Screen name='Home' component={HomeTabsNavigator} />
<Stack.Screen name='ExploreOptions' component={LayoutsNavigator} />
<Stack.Screen name='CreateOptions' component={PostNavigator} />
<Stack.Screen name='FavoritesOptions' component={FavoritesNavigator} />
<Stack.Screen name='SettingsOptions' component={SettingsNavigator} />
</Stack.Navigator>
);
};
export const HomeTabsNavigator = (): React.ReactElement => {
return (
<BottomTab.Navigator
screenOptions={TabBarVisibleOnRootScreenOptions}
initialRouteName={'Explore'}
tabBar={props => <HomeBottom {...props} />}>
<BottomTab.Screen name='Explore' component={LayoutsScreen} />
<BottomTab.Screen name='Post' component={PostsScreen} />
<BottomTab.Screen name='Favorites' component={LayoutsScreen} />
<BottomTab.Screen name='Settings' component={SettingsContainer} />
</BottomTab.Navigator>
);
};
方案 1
当我尝试使用 xcrun simctl openurl booted latineo://homestack/explore 或 latineo://homestack/settings, explorestack/restaurant/:id 等(后台应用程序)时,它工作正常,但是当应用程序关闭时(被杀死)它总是打开 homestack/explore。
场景 2 当我尝试使用 explorestack/restaurant/:id 时,它可以工作,但是当我按下 navigation.back() 按钮时,它会返回到空白屏幕(如果我使用此白色屏幕上的手势,我可以返回主屏幕)。
当我尝试使用后退按钮时,当我尝试使用 explorestack/restaurants 时会发生类似的事情,它导航到同一屏幕但没有标题。
解决方案
推荐阅读
- google-kubernetes-engine - Stackdriver 在 GKE 容器的摘要页面上缺少 CPU 和内存信息
- python - 将大型嵌套字典转储到 JSON 对象中
- android - 如何在 android 中使用 pjsip 启用 SRTP?
- python - 有没有一种方法可以将我自己的 CLI 开关传递给 unittest 文件?
- node.js - 传递给 Handlebars 的数据未显示
- c++ - 释放序列的概念在实践中有用吗?
- rest - Unity 在 SAP Rest API 上调用 HTTP-Post 时出现 400 Bad Request
- python - 尝试安装 flask_mysqldb 时出现错误“OSError: mysql_config not found”
- sql - 如何读取文本文件并插入数据库
- django - 如何一键链接 2 个 django 模板?