英文:
How to hide headers for all the screens except for some selected screens in react native stack navigation
问题
我需要在除了某些屏幕之外的所有屏幕上保持导航头部隐藏，我会在其中定义是否显示头部。我该如何在React Native中实现这个目标？
我尝试了互联网上的几种解决方案，但没有成功。我在项目中使用了堆栈导航和底部选项卡导航。
英文:
I need to keep the navigation header hidden for all the screens except for some screen for which I define whether to show the header or not. How can I do that in react native?
I tried several solutions from the internet but it didn't work. I am using Stack Navigration and Bottom Tab navigation in the project.
答案1
得分: 1
有一个名为 screenOptions 的属性，适用于选项卡导航器和堆栈导航器，其中包含一个 headerShown 选项。您可以使用此属性来禁用属于该导航器的任何屏幕的标题栏。然后，在您想要具有标题栏的特定屏幕上，您可以明确使用也具有 headerShown 选项的 options 属性。例如：
const Stack = createStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name='ScreenWithoutHeader' component={ExampleComponent} />
<Stack.Screen
name='ScreenWithHeader'
component={ExampleComponent}
options={{
headerShown: true
}}
/>
</Stack.Navigator>
您可以在 Tab.Navigator 和 Tab.Screen 中使用相同的属性和选项。您可以在React Native 网站了解有关这些属性的更多信息。
英文:
There is a property called screenOptions for both the tab and stack navigators that has a headerShown option. You can use this property to disable the headers for any screens that belong to the navigator. Then, on the specific screens that you want to have headers, you can explicitly use the options property which also has a headerShown option. For example:
const Stack = createStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name='ScreenWithoutHeader' component={ExampleComponent} />
<Stack.Screen
name='ScreenWithHeader'
component={ExampleComponent}
options={{
headerShown: true
}}
/>
</Stack.Navigator>
You can use the same properties and options for Tab.Navigator and Tab.Screen. You can read more about these properties on the React Native site.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论