在react native中为多个选项卡屏幕提供共享配置文件屏幕

Question

我有一个react native应用程序，使用react导航v6与底部选项卡导航器，我想有一个配置文件屏幕在同一堆栈不显示在底部选项卡，只有在手动导航时才能访问。

export function AppStack() {
return (
<Tab.Navigator
screenOptions={{ headerShown: false }}
tabBar={(props) => <NavBar {...props} />}
>
<Tab.Screen name="Timeline" component={TimelineScreen} />
<Tab.Screen name="Goals" component={GoalScreen} />
<Tab.Screen name="Notes" component={NoteScreen} />
<Tab.Screen name="Schedule" component={ScheduleScreen} />
</Tab.Navigator>
);
}

Answer 1

您可以使用tabBarButton将自定义组件传递给Screen。然后只返回null，不显示任何内容。

export function AppStack() {
return (
<Tab.Navigator
screenOptions={{ headerShown: false }}
tabBar={(props) => <NavBar {...props} />}
>
<Tab.Screen name="Timeline" component={TimelineScreen} />
<Tab.Screen name="Goals" component={GoalScreen} />
<Tab.Screen name="Notes" component={NoteScreen} />
<Tab.Screen name="Schedule" component={ScheduleScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} options={() => ({
tabBarButton: () => null,
})}/>
</Tab.Navigator>
);
}

你可以通过以下命令从另一个屏幕导航到设置界面:

navigation.navigate('Settings');