So blenden Sie Reagieren Nativen NavigationBar

Habe ich NavigatorIOS unter Navigator und würde gerne verbergen Navigator NavigationBar verwenden NavigatorIOS ' s bar. Gibt es eine Möglichkeit, dies zu tun?

Dies ist Abbildungdie ich gesehen habe. Ich brauche backend NavigatorIOS..

Die Struktur, die ich bauen will ist die folgende:

├── NavigatorRoute1
│   ├── NavigatorIOSRoute1
│   ├── NavigatorIOSRoute2
│   └── NavigatorIOSRoute3
└── NavigatorRoute2

Den code, den ich habe, ist die unten. (Im Grunde erhalten Sie von UIExplore Beispiele.

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

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 mit meiner Lösung

Habe ich noch eine Funktion zum ändern des Status, die mit dem Rendern der Navigator, und übergeben Sie die Requisiten auf die Komponente, um den Status zu ändern.

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

}

und

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

}

InformationsquelleAutor der Frage shohey1226 | 2015-05-12

2

In der Navigator-Klasse, es sieht aus wie Sie ' re passing in einer Navigationsleiste. Sie können hinzufügen von Logik zu übergeben, entweder Navigator.NavigationBar oder Ihre NavigatorIOS bar je nachdem, welche Sie verwenden möchten. Zu tun, dass müssten Sie geben Sie eine state-variable im Navigator, den Sie aktualisieren, wenn Sie wollen, dass die bar zu ändern.

InformationsquelleAutor der Antwort Linai

Ich löste dies durch die Definition eines custom NavigationBar, die Sie besichtigen können Sie die aktuelle route. Würde in etwa so Aussehen:

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

Mit Ihrem Beispiel:

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

InformationsquelleAutor der Antwort Jeff Trudeau

14

Weil einige alte Methoden sind veraltet, die ich verwendet stacknavigator.
Es funktioniert für mich, wenn Sie mit StackNavigator.
```
static navigationOptions = { title: 'Welcome', header: null };
```
Fühlen Sie sich frei zu Kontaktieren, wenn irgendein Problem.

InformationsquelleAutor der Antwort Naeem Ibrahim
5

Wenn Sie NavigatorIOS immer, Sie können es so machen:
1. ändern Sie die Datei NavigatorIOS.ios.js wie unten:
```
before: navigationBarHidden={this.props.navigationBarHidden}
after:  navigationBarHidden={route.navigationBarHidden}
```
2. navigator.push({navigationBarHidden: false})
InformationsquelleAutor der Antwort H87kg_X

Habe ich dieses:

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

InformationsquelleAutor der Antwort Роман Карабанов

übergeben Sie diese Eigenschaft zusammen mit navigator.push-oder initialRoute indem es als wahr

navigationBarHidden?: PropTypes.bool

Boolescher Wert, der angibt, ob die navigation-Leiste ist standardmäßig ausgeblendet.

zB:

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

oder

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

InformationsquelleAutor der Antwort Tibin Thomas

2

verwenden header: null reagieren-navigation, in Ihrem navigationOptions wie folgt;
```
navigationOptions: {
    header: null,
}
```
InformationsquelleAutor der Antwort Isaac Sekamatte

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

InformationsquelleAutor der Antwort Shubham Goel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.