在 ReactNav 5 中按下选项卡按钮时重置堆栈导航

Question

我有 3 个选项卡，每个选项卡后面是一个堆栈导航。当我单击另一个选项卡按钮时，我总是想重置堆栈导航。

现在，当我像 A -> B -> C> D 一样进入 Stack1 时 我切换到 Tab2，然后改回 Tab1，我再次在屏幕 D 处。 我想再次看到屏幕 A。我使用 React-Navigation-5

我会接受任何向我展示一段代码如何实现它的答案。

我的代码如下所示：

应用.js：

export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Tab1" component={Stack1} />
<Tab.Screen name="Tab2" component={Stack2} />
<Tab.Screen name="Tab3" component={Stack3} />
</Tab.Navigator>
</NavigationContainer>
);
}

其中，我的每个堆栈导航如下所示：

function EventExploreStack({ navigation }) {  
return (
<SettingsStack.Navigator initialRouteName="A">
<SettingsStack.Screen name="A" component={AScreen} />
<SettingsStack.Screen name="B" component={BScreen} />
<SettingsStack.Screen name="C" component={CScreen} />
<SettingsStack.Screen name="D" component={DScreen} />
<SettingsStack.Screen name="E" component={EScreen} />
</SettingsStack.Navigator>
);
}
export default EventExploreStack;

我正在使用反应导航 5。

Answer 1

一种选择是使用导航的重置操作。由于您在三个选项卡中有三个堆栈，因此您需要一个自定义选项卡栏按钮来执行此操作，这将重置给定选项卡的状态。按钮的代码如下。

在这里，我使用"主页"和"设置"作为选项卡，您必须根据需要更改它们。

const CustomButton = (props) => {
const navigation = useNavigation();
return (
<TouchableOpacity
{...props}
onPress={() => {
navigation.dispatch((state) => {
const newState = Object.assign(state);
const index = newState.routes.findIndex((x) => (x.name = 'Home'));
if (newState.routes[index].state) {
const { name, key } = newState.routes[index];
newState.routes[index] = { name, key };
}
return CommonActions.reset({
...newState,
});
});
navigation.navigate('Settings');
}}
/>
);
};

您可以将其放置在选项卡屏幕中，如下所示

<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarButton: (props) => <CustomButton {...props} />,
}}
/>

您可以在此处试用示例 https://snack.expo.io/@guruparan/bottomnavclick

希望这对:)有所帮助

Answer 2

Take a look at the **createBottomTabNavigator** here https://reactnavigation.org/docs/bottom-tab-navigator/

例

npm 安装@react导航/底部选项卡

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}

Answer 3

创建一个帮助程序，用于重置当前未选择的所有选项卡的堆栈，并将其传递给每个选项卡。

喜欢这个：

助手：

import { StackActions } from '@react-navigation/native';
export const resetStacksOnTabClicks = ({ navigation }: any) => ({
tabPress: (e: any) => {
const state = navigation.dangerouslyGetState();
if (state) {
const nonTargetTabs = state.routes.filter((r: any) => r.key !== e.target);
nonTargetTabs.forEach((tab: any) => {
if (tab?.state?.key) {
navigation.dispatch({
...StackActions.popToTop(),
target: tab?.state?.key,
});
}
});
}
},
});

然后将该助手传递给listeners道具中的每个 Tab，如下所示：

<Tabs.Screen
name="TabName"
component={YourComponent}
listeners={resetStacksOnTabClicks}
/>