Skip to content

Navigation structures for Appcelerartor Titanium applications

License

Notifications You must be signed in to change notification settings

gimdongwoo/titanium-navigation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Titanium Navigation

Titanium Navigation allows you to define navigation structures for Titanium applications. It also renders common elements such as navbar(=actionbar) and tab bar.

Built-in Navigations

It includes the following functions to help you create navigations:

  • StackNavigation - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack.
  • TabNavigation - Renders a tab bar that lets the user switch between several screens. It use Titanium TabGroup and Tab.
  • DrawerNavigation - Provides a drawer that slides in from the left or right of the screen.

Controllers with Navigation

The navigations render views from controllers. To learn how to create views, read about:

  • navigation : Controller arguments[0].navigation to allow the screen to call navigation actions, such as opening another screen
  • navigationOptions : Controller's exports.navigationOptions to customize how the screen gets presented by the navigation (e.g. navBar title, tab label)

Calling Navigation on Controller

Titanium Navigation provide navigation in Titanium widget, it can use as follows.

var StackNavigator = Alloy.createWidget('titanium.navigation').StackNavigator;

var StackWindow = StackNavigator({
  Main: { controller: 'stack/main' },
  Profile: { controller: 'stack/profile' }
}, {
  initialRouteName: 'Main',
  initialRouteParams: { isCloseable: true }
});

StackWindow.open();

Get the top-level view from the controller and display it.

Get it

Install and add this component to your project using gitt.io cli.

$ gittio install titanium.navigation

Or take the widget from this repository and add it to your project manually.

Inspired by these

React Navigation : We try to provide the same function as this. The code is completely different. We also refer to documents from this, but we expect to change gradually.

Need to contributions

We hope to get your star and report issue, and join the code.