如何隐藏 React Native NavigationBar答案

【问题标题】：How to hide React Native NavigationBar如何隐藏 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 函数？我的项目是模块化的，我需要从另一个文件的组件中调用它。

标签： javascript react-native navigationbar

【解决方案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 您能否详细说明您是如何使用 requestAnimationFra‌me 解决的？

【解决方案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
      };
    }
  }
);

【讨论】：