如何隐藏 React Native NavigationBar
Posted
技术标签:
【中文标题】如何隐藏 React Native NavigationBar【英文标题】：How to hide React Native NavigationBar 【发布时间】：2015-07-24 00:36:43 【问题描述】：我在 Navigator 下有 Navigatorios，想隐藏 Navigator 的 NavigationBar 以使用 NavigatorIOS 的栏。有没有办法做到这一点？
这是我见过的screenshot。我需要 NavigatorIOS 的后端..
我要构建的结构如下：
├── NavigatorRoute1
│ ├── NavigatorIOSRoute1
│ ├── NavigatorIOSRoute2
│ └── NavigatorIOSRoute3
└── NavigatorRoute2
我拥有的代码如下。 （基本取自 UIExplore 示例。
导航器
render: function()
return (
<Navigator
initialRoute=ROUTE_STACK[this.getInitialRouteIndex()]
initialRouteStack=ROUTE_STACK
style=styles.container
renderScene=this.renderScene
navigationBar=
<Navigator.NavigationBar
routeMapper=NavigationBarRouteMapper
style=styles.navBar
/>
/>
);
NavigatorIOS
render: function()
var nav = this.props.navigator;
return (
<NavigatorIOS
style=styles.container
ref="nav"
initialRoute=
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
passProps: nav: nav,
tintColor="#FFFFFF"
barTintColor="#183E63"
titleTextColor="#FFFFFF"
/>
);
更新我的解决方案
我添加了一个更改状态的函数，该函数处理 Navigator 的渲染并将 prop 传递给组件以更改状态。
hideNavBar: function()
this.setState(hideNavBar: true);
,
render: function()
if ( this.state.hideNavBar === true )
return (
<Navigator
initialRoute=ROUTE_STACK[0]
initialRouteStack=ROUTE_STACK
renderScene=this.renderScene
/>
);
else
return (
<Navigator
initialRoute=ROUTE_STACK[this.getInitialRouteIndex()]
initialRouteStack=ROUTE_STACK
style=styles.container
renderScene=this.renderScene
navigationBar=
<Navigator.NavigationBar
routeMapper=NavigationBarRouteMapper
style=styles.navBar
/>
/>
);
和
render: function()
var hideNavBar = this.props.hideNavBar;
return (
<NavigatorIOS
style=styles.container
initialRoute=
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
passProps: hideNavBar: hideNavBar,
tintColor="#FFFFFF"
barTintColor="#183E63"
titleTextColor="#FFFFFF"
/>
);
【问题讨论】：
如何调用您创建的hideNavBar 函数？我的项目是模块化的，我需要从另一个文件的组件中调用它。
【参考方案1】：
因为不推荐使用一些旧方法，所以我使用了 stacknavigator。 如果您使用的是 StackNavigator，它对我有用。
//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = title: 'Welcome', header: null ;
//For Latest Version Use:
static navigationOptions = title: 'Welcome', headerShown: false;
如有任何问题，请随时联系。
【讨论】：
嘿！您的解决方案很简单，对我来说效果最好。给你一个赞成票:)。你如何防止通知栏与android上的导航栏重叠？ 除此之外没有其他东西对我有用。我正在使用 react-native-cli: 2.0.1 react-native: 0.51.0 当然使用 StackNavigator【参考方案2】：我通过定义一个可以检查当前路线的自定义 NavigationBar 解决了这个问题。看起来像这样：
class NavigationBar extends Navigator.NavigationBar
render()
var routes = this.props.navState.routeStack;
if (routes.length)
var route = routes[routes.length - 1];
if (route.display === false)
return null;
return super.render();
用你的例子：
render: function()
return (
<Navigator
initialRoute=
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
display: false,
style=styles.container
renderScene=this.renderScene
navigationBar=
<NavigationBar
routeMapper=NavigationBarRouteMapper
style=styles.navBar
/>
/>
);
【讨论】：
我想补充一点，我试图依赖this.props.navState.presentedIndex，但在渲染时它总是落后于真实的presentedIndex。我最终做的是在渲染中使用requestAnimationFrame 并在下一帧检查正确的presentedIndex
@GastonM 您能否详细说明您是如何使用 requestAnimationFrame 解决的？【参考方案3】：
在 React Navigation (5.x,6.x) [当前版本是 6.x]
设置headerShown属性为false隐藏导航栏如下：
<Stack.Screen name="Login" component=LoginScreen options= headerShown: false />
完整示例：
import React from 'react';
import NavigationContainer from '@react-navigation/native';
import createStackNavigator from '@react-navigation/stack';
// Screen
import LoginScreen from '../screens/auth/LoginScreen';
const Stack = createStackNavigator();
const CareAndCarersNavigation = () =>
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component=LoginScreen options= headerShown: false />
</Stack.Navigator>
</NavigationContainer>
)
export default MainNavigation
在 React 导航 (4.0) 中
要隐藏导航栏，您有 3 个选项：
1.对于单屏，可以在navigationOptions中设置header为空
static navigationOptions =
//To hide the ActionBar/NavigationBar
header: null,
;
2.对于单屏，可以像这样在createStackNavigator中设置header null
const App = createStackNavigator(
First:
screen: HomeActivity,
navigationOptions:
header: null,
,
,
);
3.使用defaultNavigationOptions一次隐藏所有屏幕的标题
const App = createStackNavigator(
First:
screen: HomeActivity,
,
,
defaultNavigationOptions:
header: null
,
);
更新
正如@DarthVanger 在下面的评论中所说，要隐藏堆栈中的所有标题，请使用screenOptions，如下所示：
<NavigationContainer>
<Stack.Navigator screenOptions= headerShown: false >
<Stack.Screen name="Home" component=HomeScreen />
<Stack.Screen name="Profile" component=ProfileScreen />
</Stack.Navigator>
</NavigationContainer>
【讨论】：
要在所有屏幕上隐藏它，请使用<Stack.Navigator screenOptions= headerShown: false >【参考方案4】：
我这样做了：
Dashboard:
screen: Dashboard,
navigationOptions:
headerStyle: display:"none",
headerLeft: null
,
,
【讨论】：
嗨，这个添加应该隐藏android中的软按钮吗？ headerLeft 中的“左”是什么意思？为什么我不能只做'header:null'？【参考方案5】：对于 React Navigation 5.x
在所有屏幕中隐藏导航栏
<Stack.Navigator
screenOptions=
headerShown: false
>
<Stack.Screen name="route-name" component=ScreenComponent />
</Stack.Navigator>
只隐藏一屏或特定屏的导航栏见以下代码。
<Stack.Screen options=headerShown: false name="route-name" component=ScreenComponent />
更多信息请参见react-navigation-5.0。
【讨论】：
【参考方案6】：如果你总是使用 NavigatorIOS，你可以这样做：
修改 NavigatorIOS.ios.js 文件如下：
before: navigationBarHidden=this.props.navigationBarHidden
after: navigationBarHidden=route.navigationBarHidden
navigator.push(navigationBarHidden: false)
【讨论】：
【参考方案7】：static navigationOptions = title: 'Welcome', header: null ;
【讨论】：
【参考方案8】：在您的 Navigator 类中，您似乎正在传递一个导航栏。您可以在那里添加逻辑以传递 Navigator.NavigationBar 或 NavigatorIOS 栏，具体取决于您要使用的。为此，您需要在 Navigator 中指定一个状态变量，当您希望栏发生变化时会更新该变量。
【讨论】：
【参考方案9】：将此属性与 navigator.push 或 initialRoute 一起通过将其设置为 true 来传递
navigationBarHidden?: PropTypes.bool
指示导航栏是否默认隐藏的布尔值。
例如：
<NavigatorIOS
style=styles.container
initialRoute=
title: 'LOGIN',
component: Main,
navigationBarHidden: true,
/>
或
this.props.navigator.replace(
title: 'ProviderList',
component: ProviderList,
passProps: text: "hai",``
navigationBarHidden: true,
);
【讨论】：
【参考方案10】：在你的navigationOptions中使用header: null作为react-navigation，如下所示；
navigationOptions:
header: null,
【讨论】：
嗨，这个添加应该隐藏android中的软按钮？【参考方案11】：你需要像这样声明导航对象。
const StackNavigator = createStackNavigator(
Screen: screen: HOME,
,
navigationOptions: ( navigation ) =>
const routeName = navigation.state.routes[navigation.state.index];
return
headerShown: false,
header: null,
headerTitle: routeName
;
);
【讨论】：
以上是关于如何隐藏 React Native NavigationBar的主要内容，如果未能解决你的问题，请参考以下文章
React Native Navigation，如何在 Class Components 之间传递和使用 Props？
如何在 React Native / Navigation 中的图像 URL 中插入路由参数？
如何隐藏 React Native NavigationBar