react-native - React Navigation 5嵌套屏幕无法返回主屏幕
问题描述
我无法找出嵌套的导航器。我有一个带有这些按钮的 bottomTabNavigator:
Home
Stations
-> StationDetail (StationScreen)
Shows
-> ShowDetail (ShowScreen)
在我的主页选项卡上,我有一个与站页面相同的站的水平滚动。
问题:当我使用此代码从主页导航到站点详细信息页面以导航到嵌套导航器时,我无法导航回主/根 StationsScreen 选项卡
navigation.navigate('Stations', {
screen: 'Station',
station: props.station,
});
但是,如果我先导航到站选项卡,然后返回主页,然后单击一个站,它会按预期工作。我该如何解决这种行为?我见过像“重置”这样的东西,但我不确定该放在哪里。这是我的代码的简化摘录:
AppStack.js:
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeStack from './HomeStack';
import StationStack from './StationStack';
import ShowStack from './ShowStack';
const Tab = createBottomTabNavigator();
const AppStack = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Stations" component={StationStack} />
<Tab.Screen name="Shows" component={ShowStack} />
</Tab.Navigator>
);
};
export default AppStack;
HomeStack.js
import React from 'react';
import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import TopBarRight from '../components/TopBarRight';
import HomeScreen from '../screens/HomeScreen';
import StationScreen from '../screens/StationScreen';
import {useNavigation} from '@react-navigation/native';
const Top = createStackNavigator();
const HomeStack = () => {
const navigation = useNavigation();
return (
<Top.Navigator>
<Top.Screen name="Welcome" component={HomeScreen} />
</Top.Navigator>
);
};
export default HomeStack;
HomeScreen.js(相关部分)
<SafeAreaView styles={styles.container}>
<StatusBar barStyle="light-content" />
<ScrollView>
<StationScroll />
</ScrollView>
</SafeAreaView>
StationScroll 只是加载站徽章列表 StationBadge.js
const StationBadge = (props: StationProps) => {
const navigation = useNavigation();
const onPress = () => {
navigation.navigate('Stations', {
screen: 'Station',
station: props.station,
});
console.log(`station pressed: ${props.station.location}`);
};
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.container}>
<Image
style={styles.image}
source={{
uri: `https://example.com/img/station-logos/${props.station.callsign}.png`,
}}
/>
<Text numberOfLines={1} style={styles.text}>
{props.station.location}
</Text>
</View>
</TouchableOpacity>
);
};
export default StationBadge;
这里还有 StationStack.js
import React from 'react';
import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import StationsScreen from '../screens/StationsScreen';
import StationScreen from '../screens/StationScreen';
import {StackActions, useNavigation} from '@react-navigation/native';
const SS = createStackNavigator();
const StationStack = () => {
const navigation = useNavigation();
return (
<SS.Navigator>
<SS.Screen name="Stations" component={StationsScreen}/>
<SS.Screen name="Station" component={StationScreen} />
</SS.Navigator>
);
};
export default StationStack;
解决方案
我应该继续阅读文档:
渲染导航器中定义的初始路线
默认情况下,当你在嵌套导航器中导航一个屏幕时,指定的屏幕被用作初始屏幕,导航器上的初始路由道具被忽略。这种行为与 React Navigation 4 不同。
如果需要渲染导航器中指定的初始路由,可以通过设置initial: false来禁用使用指定屏幕作为初始屏幕的行为:
navigation.navigate('Stations', {
screen: 'Station',
initial: false,
});
推荐阅读
- javascript - 悬停在按钮上的css技巧按钮
- javascript - jquery validate SubmitHandler 在提交按钮后未触发
- cassandra - Cassandra 客户端驱动程序超时参数
- projection - 合并事件存储中的两个流的投影
- algorithm - 从集合中寻找最佳匹配位图
- catboost - 如何在 CatBoostClassifier.fit() 之后获取评估指标?
- google-chrome - 在 chrome 扩展弹出窗口中运行 Flash
- python - Pythoncom 接口转换
- android - 来自JSON的Android ListView,字符串中有空格
- oracle - 在 Oracle 函数中传递逗号分隔列表作为参数