Javascript 如何隐藏 React Native NavigationBar
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30202705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide React Native NavigationBar
提问by shohey1226
I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this?
我在 Navigator 下有 NavigatorIOS，想隐藏 Navigator 的 NavigationBar 以使用 NavigatorIOS 的栏。有没有办法做到这一点？
This is screenshotthat I've seen. I need backend of NavigatorIOS..
这是我看过的截图。我需要 NavigatorIOS 的后端..
The structure that I want to build is the following:
我要构建的结构如下：
├── NavigatorRoute1
│?? ├── NavigatorIOSRoute1
│?? ├── NavigatorIOSRoute2
│?? └── NavigatorIOSRoute3
└── NavigatorRoute2
The code that I have is the below. (Basically obtained from UIExplore examples.
我拥有的代码如下。（基本上从 UIExplore 示例中获得。
Navigator
航海家
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
导航器IOS
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"
/>
);
}
}
UPDATE with my solution
更新我的解决方案
I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.
我添加了一个函数来更改处理 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}
/>
}
/>
);
}
}
}
and
和
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"
/>
);
}
}
采纳答案by Linai
In your Navigator class it looks like you're passing in a navigation bar. You can add logic there to pass in either Navigator.NavigationBar or your NavigatorIOS bar depending on which you'd like to use. To do that you'd need to specify a state variable in Navigator that you'd update when you want the bar to change.
在您的 Navigator 类中，您似乎传入了一个导航栏。您可以在那里添加逻辑以传入 Navigator.NavigationBar 或 NavigatorIOS 栏，具体取决于您要使用的那个。要做到这一点，您需要在 Navigator 中指定一个状态变量，当您希望栏更改时，您将更新该变量。
回答by Jeff Trudeau
I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:
我通过定义一个可以检查当前路线的自定义 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();
}
}
Using your example:
使用您的示例：
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}
/>
}
/>
);
}
回答by Naeem Ibrahim
Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.
因为不推荐使用一些旧方法，所以我使用了 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};
Feel free to contact, if any issue.
如有任何问题，请随时联系。
回答by AbolfazlR
In the React Navigation (5.x) [Current Version]
在 React Navigation (5.x) [当前版本]
Set headerShownproperty to falseto hide navigation bar as below :
将headerShown属性设置false为隐藏导航栏，如下所示：
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
complete example :
完整示例：
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
In the React Navigation (4.0)
在 React 导航 (4.0) 中
to hide navigation bar you have 3 options:
要隐藏导航栏，您有3 个选项：
1.For the single screen, you can set header null in navigationOptions
1.对于单屏，可以在navigationOptions中设置header null
static navigationOptions = {
//To hide the ActionBar/NavigationBar
header: null,
};
2.For the single screen, you can set header null in createStackNavigator like this
2.对于单屏，可以像这样在createStackNavigator中设置header null
const App = createStackNavigator({
First: {
screen: HomeActivity,
navigationOptions: {
header: null,
},
},
});
3.Hide the header from all the screens in once using defaultNavigationOptions
3.使用 defaultNavigationOptions 一次性隐藏所有屏幕的标题
const App = createStackNavigator(
{
First: {
screen: HomeActivity,
},
},{
defaultNavigationOptions: {
header: null
},
}
);
回答by Роман Карабанов
I did this:
我这样做了：
Dashboard:{
screen: Dashboard,
navigationOptions: {
headerStyle: {display:"none"},
headerLeft: null
},
},
回答by H87kg_X
If you use NavigatorIOS always, you can do it like this:
如果你总是使用 NavigatorIOS，你可以这样做：
modify the file NavigatorIOS.ios.js as below:
before: navigationBarHidden={this.props.navigationBarHidden} after: navigationBarHidden={route.navigationBarHidden}navigator.push({navigationBarHidden: false})
修改文件 NavigatorIOS.ios.js 如下：
before: navigationBarHidden={this.props.navigationBarHidden} after: navigationBarHidden={route.navigationBarHidden}navigator.push({navigationBarHidden: false})
回答by Shubham Goel
static navigationOptions = { title: 'Welcome', header: null };
回答by Tibin Thomas
pass this property along with navigator.push or initialRoute by setting it as true
将此属性与 navigator.push 或 initialRoute 设置为 true 一起传递
navigationBarHidden?: PropTypes.bool
导航栏隐藏？：PropTypes.bool
Boolean value that indicates whether the navigation bar is hidden by default.
指示导航栏是否默认隐藏的布尔值。
eg:
例如：
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'LOGIN',
component: Main,
navigationBarHidden: true,
}}/>
or
或者
this.props.navigator.replace({
title: 'ProviderList',
component: ProviderList,
passProps: {text: "hai"},``
navigationBarHidden: true,
});
回答by Isaac Sekamatte
use header: null for react-navigation, in your navigationOptions as follows;
使用 header: null 进行 react-navigation，在您的 navigationOptions 中，如下所示；
navigationOptions: {
header: null,
}
回答by Ramana Sakhavarapu
you need declare navigation object like this .
你需要像这样声明导航对象。
const StackNavigator = createStackNavigator(
{
Screen: { screen: HOME},
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
headerShown: false,
header: null,
headerTitle: routeName
};
}
}
);
