Edit this page on Github

iosNavigator

A component for displaying a navigator.

It acts as the primary outlet for the router. A Router's navigation triggers a navigation of the Navigator.

For each route, additional data can be provided as follows: {title: string, titleImage: any, backButtonIcon: any, backButtonTitle: string, leftButtonIcon: any, leftButtonTitle: string, rightButtonIcon: any, rightButtonTitle: string, wrapperStyle: any, navigationBarHidden: boolean, shadowHidden: boolean, tintColor: string, barTintColor: string, titleTextColor: string, translucent: boolean}

@Component({
  selector: 'foo',
  template: `<View routerLink="bar"><Text>Foo from here</Text></View>`
})
class Foo {}

@Component({
  selector: 'bar',
  template: `<View><Text>Bar from here</Text></View>`
})
class Bar {}

@Component({
  selector: 'sample',
  template: `<Navigator (rightButtonPress)="_navigate($event)"></Navigator>`
})
export class Sample {
  constructor(private router: Router) {
  }

  _navigate(event: ActivatedRoute) {
    this.router.navigateByUrl('/bar');
  }
}


const moreLogo = require('../../assets/icon_more.png');
const appRoutes = [
 { path: '', component: Foo, data: {title: 'foo!', rightButtonIcon: moreLogo, backButtonTitle: 'back'}},
 { path: 'bar', component: Bar, data: {title: 'bar!'} }
];

@NgModule({
  declarations: [Sample, CompA, CompB],
  imports: [ReactNativeModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
  bootstrap: [Sample]
})
export class AppModule {}

Available styles

https://facebook.github.io/react-native/docs/view.html#style

Inputs

Inherits all inputs from high level component

barTintColor: color

To be documented

interactivePopGestureEnabled: boolean

To be documented

itemWrapperStyle: any

To be documented

navigationBarHidden: boolean

To be documented

shadowHidden: boolean

To be documented

tintColor: color

To be documented

titleTextColor: color

To be documented

translucent: boolean

To be documented

Outputs

leftButtonPress: EventEmitter<ActivatedRoute>

To be documented

rightButtonPress: EventEmitter<ActivatedRoute>

To be documented


Getting started

Features

bootstrapAPIsGesturesHttpRouterStyle

Components

ActivityIndicatorHighLevelComponentImagePickerRefreshControlScrollViewSliderSwitchTextTextInputViewWebView
Android
DrawerLayoutPagerLayoutProgressBarToolbar
iOS
DatePickerNavigatorProgressViewSegmentedControlTabBarTabBarItem

Directives

Opacity feedbackRipple feedback