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

У меня есть NavigatorIOS под Navigator и вы хотите скрыть 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"
  />
);

}

UPDATE с моим решением

Я добавил функцию для изменения состояния, которое обрабатывает рендеринг 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"
  />
 );

}

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Не стесняйтесь обращаться, если есть какие-либо проблемы.

Ответ 4

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

  • измените файл NavigatorIOS.ios.js, как показано ниже:

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

  • navigator.push({navigationBarHidden: false})

Ответ 5

Я сделал это:

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

Ответ 6

передать это свойство вместе с 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,
  });

Ответ 7

используйте заголовок: null для интерактивной навигации, в вашем навигационном устройстве:

navigationOptions: {
    header: null,
}