talkol 55b2fe1fa6 adding example content | 8 years ago | |
---|---|---|
example | 8 years ago | |
example-redux | 8 years ago | |
src | 8 years ago | |
.gitignore | 8 years ago | |
.npmignore | 8 years ago | |
LICENSE | 8 years ago | |
README.md | 8 years ago | |
index.js | 8 years ago | |
package.json | 8 years ago |
Navigation
App-wide support for 100% native navigation with potential isolation support.
This would normally go in your index.ios.js
import { Navigation } from 'react-native-navigation';
// import the components for your root screens (or the packager will not bundle them)
// they all need to be registered with Navigation.registerScreen
import './FirstTabScreen';
import './SecondTabScreen';
// start the app
Navigation.startTabBasedApp([
{
title: 'One', // tab title
screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
icon: require('./img/one.png'), // local asset for tab icon (unselected state)
selectedIcon: require('./img/one_selected.png'), // local asset for tab icon (selected state)
screenTitle: 'Screen One', // navigation bar title
navigatorStyle: {} // style the navigator for this screen (optional)
},
{
title: 'Two',
screen: 'example.SecondTabScreen',
icon: require('./img/two.png'),
selectedIcon: require('./img/two_selected.png'),
screenTitle: 'Screen Two'
}
]);
Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to follow two basic conventions:
Normally your React components extend React.Component
, in order to get access to the navigator
you need to extend Screen
instead.
You need to register your component since it’s displayed as a separate React root. Register a unique ID with Navigation.registerScreen
.
Note: Since your screens will potentially be bundled with other packages, your registered name must be unique! Follow a namespacing convention like
packageName.ScreenName
.
import { Navigation, Screen } from 'react-native-navigation';
class ExampleScreen extends Screen {
static navigatorStyle = {}; // style the navigator for this screen (optional)
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>...</View>
);
}
}
// register all screens with Navigation.registerScreen
Navigation.registerScreen('example.ScreenOne', () => ExampleScreen);
This API is available through the navigator
object. When your screen components extend Screen
, they have this.navigator
available and initialized.
this.navigator.push({
screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
title: undefined, // navigation bar title of the pushed screen (optional)
passProps: {}, // simple serializable object that will pass as props to the pushed component (optional)
animated: true, // does the push have transition animation or does it happen immediately (optional)
backButtonTitle: undefined, // override the back button title (optional)
navigatorStyle: {} // override the navigator style for the pushed screen (optional)
});
this.navigator.pop({
animated: true // does the pop have transition animation or does it happen immediately (optional)
});
Navigation.startTabBasedApp([
{
title: 'One', // tab title
screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
icon: require('./img/one.png'), // local asset for tab icon (unselected state)
selectedIcon: require('./img/one_selected.png'), // local asset for tab icon (selected state)
screenTitle: 'Screen One', // navigation bar title
navigatorStyle: {} // style the navigator for this screen (optional)
},
{
title: 'Two',
screen: 'example.SecondTabScreen',
icon: require('./img/two.png'),
selectedIcon: require('./img/two_selected.png'),
screenTitle: 'Screen Two'
}
]);
Navigation.startSingleScreenApp({
screen: 'example.WelcomeScreen', // unique ID registered with Navigation.registerScreen
screenTitle: 'Welcome', // navigation bar title
navigatorStyle: {} // style the navigator for this screen (optional)
});
It is also possible to switch between types of apps while the app is running. This can be useful for example when switching from a login mode (which has no tabs = startSingleScreenApp
) to the actual app itself (which has tabs = startTabBasedApp
). Please note that when switching formats, the entire “old” app will be unmounted and released.
Tip: The other pattern of implementing login is having just one app type (like tabs) and showing the login dialog as a modal that hides the tabs when the app is launched. When login is completed, this modal is dismissed.
You can style the navigator appearance and behavior by passing a navigatorStyle
object. This object can be passed when the screen is originally created; can be defined per-screen in the static navigatorStyle = {};
on Screen
; and can be overridden when a screen is pushed.
All supported styles are defined here.