diff --git a/Example/Example.js b/Example/Example.js index cff9c5487..67c390577 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -8,6 +8,7 @@ import Error from './components/Error' import Home from './components/Home' import TabView from './components/TabView' import EchoView from './components/EchoView' +import NavigationDrawer from './components/NavigationDrawer' class TabIcon extends React.Component { render(){ @@ -47,7 +48,8 @@ export default class Example extends React.Component { render() { return - + + @@ -70,6 +72,7 @@ export default class Example extends React.Component { }/> + diff --git a/Example/components/NavigationDrawer.js b/Example/components/NavigationDrawer.js new file mode 100644 index 000000000..3b6d401be --- /dev/null +++ b/Example/components/NavigationDrawer.js @@ -0,0 +1,30 @@ +import React,{ + Component +} from 'react-native' +import Launch from './Launch' +import Drawer from 'react-native-drawer' +import {DefaultRenderer} from 'react-native-router-flux'; + +export default class Navigation extends Component { + render(){ + console.log(this.context); + const navigationState = this.props.navigationState; + let selected = navigationState.children[navigationState.index]; + // var activeScene = (selected.name == "root" : selected[0] ? selected); + return ( + } + tapToClose={true} + openDrawerOffset={0.2} + panCloseMask={0.2} + negotiatePan={true} + tweenHandler={(ratio) => ({ + main: { opacity:Math.max(0.54,1-ratio) } + })}> + + + ); + } +} diff --git a/Example/package.json b/Example/package.json index 6601ce423..a42e029fd 100644 --- a/Example/package.json +++ b/Example/package.json @@ -10,6 +10,7 @@ "react-native-button": "^1.2.1", "react": "^0.14.7", "react-native-router-flux": "file:../", - "react-native-modalbox": "^1.3.0" + "react-native-modalbox": "^1.3.0", + "react-native-drawer": "^1.16.7" } } diff --git a/README.md b/README.md index 3451ead61..565f88402 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ class App extends React.Component { * Actions.ACTION_NAME(PARAMS) will call appropriate action and params will be passed to the scene. * Actions.pop() will pop the current screen. * Actions.refresh(PARAMS) will update the properties of current screen. - + ## Available imports - Router - Scene @@ -86,7 +86,7 @@ class App extends React.Component { | Property | Type | Default | Description | |---------------|----------|--------------|----------------------------------------------------------------| | reducer | function | | optional user-defined reducer for scenes, you may want to use it to intercept all actions and put your custom logic | -| createReducer | function | | function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below| +| createReducer | function | | function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below| | other props | | | all properties that will be passed to all your scenes | | children | | required (if no scenes property passed)| Scene root element | | scenes | object | optional | scenes for Router created with Actions.create. This will allow to create all actions BEFORE React processing. If you don't need it you may pass Scene root element as children | @@ -100,7 +100,7 @@ class App extends React.Component { | tabs| bool | false | Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no `component` is defined, built-in `TabBar` is used as renderer. All child scenes are wrapped into own navbar. | initial | bool | false | Set to `true` if this is the initial scene | | duration | number | 250 | Duration of transition (in ms) | -| direction | string | 'horizontal' | direction of animation horizontal/vertical | +| direction | string | 'horizontal' | direction of animation horizontal/vertical | | title | string | null | The title to be displayed in the navigation bar | | navBar | React.Component | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference | | hideNavBar | bool | false | hides navigation bar for this scene | @@ -227,7 +227,7 @@ To display a modal use `Modal` as root renderer, so it will render first element This component doesn't depend from any redux/flux library. It uses new React Native Navigation API and provide own reducer for its navigation state. You may provide own one if you need. To avoid creation of initial state, you may pass reducer creator. Example to print all actions: ```javascript -// remember to add the 'Reducer' to your imports along with Router, Scene, ... like so +// remember to add the 'Reducer' to your imports along with Router, Scene, ... like so // import { Reducer } from 'react-native-router-flux' const reducerCreate = params=>{ const defaultReducer = Reducer(params); @@ -258,7 +258,7 @@ Following example chooses scene depending from sessionID using Redux: ``` ## Drawer (side menu) integration -Example of Drawer custom renderer based on react-native-drawer. Note that you have to include drawer to static contextTypes of your NavBar to enable show/hide/toggle side menu: +Example of Drawer custom renderer based on react-native-drawer. Note that the build-in NavBar component supports toggling of drawer. The Drawer implementation just needs to have a function: toggle(); ```javascript import React from 'react-native'; @@ -268,7 +268,8 @@ import {DefaultRenderer} from 'react-native-router-flux'; export default class extends React.Component { render(){ - const children = this.props.navigationState.children; + const navigationState = this.props.navigationState; + let selected = navigationState.children[navigationState.index]; return ( //Material Design Style Drawer ({ main: { opacity:Math.max(0.54,1-ratio) } })}> - + ); diff --git a/src/NavBar.js b/src/NavBar.js index 66ff33c84..dc38fd069 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -32,7 +32,7 @@ const { Header: NavigationHeader, } = NavigationExperimental; -export default class extends React.Component { +export default class NavBar extends React.Component { componentWillMount(){ const state = this.props.navigationState; this._renderRightButton = this._renderRightButton.bind(this); @@ -78,7 +78,18 @@ export default class extends React.Component { _renderBackButton() { if (this.props.navigationState.index === 0) { + if(!!this.context.drawer && typeof this.context.drawer.toggle === 'function'){ + return ( + { + var drawer = this.context.drawer; + drawer.toggle(); + }}> + + + ); + }else{ return null; + } } return ( @@ -153,6 +164,11 @@ export default class extends React.Component { } + +NavBar.contextTypes = { + drawer: React.PropTypes.object +} + const styles = StyleSheet.create({ title: { textAlign: 'center', diff --git a/src/menu_burger.png b/src/menu_burger.png new file mode 100644 index 000000000..895902ddf Binary files /dev/null and b/src/menu_burger.png differ