Как скрыть React Native NavigationBar

Question

Как скрыть React Native NavigationBar

у меня есть NavigatorIOS под Navigator и хотел бы скрыть NavigationBar навигатора, чтобы использовать панель NavigatorIOS. Есть ли способ сделать это?

Это скриншот это я видел. Мне нужен бэкенд 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"
  />
 );

}

14

javascript navigationbar react-native

автор: David Nathan

8 ответов

автор: Linai · Accepted Answer · 2015-05-12 23:04:55

в вашем классе навигатора похоже, что вы проходите в навигационной панели. Вы можете добавить туда логику для передачи в любом навигаторе.NavigationBar или панель NavigatorIOS в зависимости от того, что вы хотите использовать. Для этого вам нужно указать переменную состояния в Navigator, которую вы обновите, когда хотите изменить панель.

автор: Jeff Trudeau · Accepted Answer · 2015-10-30 21:01:43

Я решил это, определив пользовательскую навигационную панель, которая может проверять текущий маршрут. Будет выглядеть примерно так:

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}
        />
      }
    />
  );
}

автор: Naeem Ibrahim · Accepted Answer · 2017-05-12 10:17:03

поскольку некоторые старые методы устарели, я использовал stacknavigator. Это работает для меня, если вы используете StackNavigator.

static navigationOptions = { title: 'Welcome', header: null };

чувствуйте свободным контактировать, если любой вопрос.

автор: H87kg_X · Accepted Answer · 2015-09-16 08:00:25

Если вы всегда используете NavigatorIOS, вы можете сделать это так:

измените файл NavigatorIOS.усвн.JS как показано ниже:

before: navigationBarHidden={this.props.navigationBarHidden}
after:  navigationBarHidden={route.navigationBarHidden}

навигатор.push ({navigationBarHidden: false})

автор: Роман Карабанов · Accepted Answer · 2017-05-18 14:57:57

Я сделал так:

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},

автор: Tibin Thomas · Accepted Answer · 2017-06-29 06:51:23

передайте это свойство вместе с navigator.нажмите или initialRoute, установив его как true

navigationBarHidden?: Проптипы.боол

логическое значение, указывающее, скрыта ли панель навигации по умолчанию.

например:

<NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'LOGIN',
            component: Main,
            navigationBarHidden: true,
          }}/>

или

this.props.navigator.replace({
        title: 'ProviderList',
        component: ProviderList,
        passProps: {text: "hai"},``
        navigationBarHidden: true,
  });

автор: Isaac Sekamatte · Accepted Answer · 2017-10-19 12:06:50

используйте заголовок: null для react-navigation, в ваших navigationOptions следующим образом;

navigationOptions: {
    header: null,
}

автор: Shubham Goel · Accepted Answer · 2018-03-14 13:06:56

static navigationOptions = { title: 'Welcome', header: null };

1

автор: Shubham Goel