├── README.md ├── doc └── ui.jpg ├── index.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # react-native-navigation-bar 2 | 3 | 4 | 5 | NavigationBar written in pure javascript for cross-platform support 6 | 7 | Since most of our apps have a similar navigationBar, we made it to be a common component 8 | 9 | Needs react-native >= 0.14.2 10 | 11 | ![ui](./doc/ui.jpg) 12 | 13 | ###Documentation 14 | ``` 15 | title: PropTypes.string.isRequired, 16 | //not include the height of statusBar on ios platform 17 | height: PropTypes.number, 18 | titleColor: PropTypes.string, 19 | backgroundColor: PropTypes.string, 20 | leftButtonTitle: PropTypes.string, 21 | leftButtonTitleColor: PropTypes.string, 22 | onLeftButtonPress: PropTypes.func, 23 | rightButtonTitle: PropTypes.string, 24 | rightButtonTitleColor: PropTypes.string, 25 | onRightButtonPress: PropTypes.func 26 | ``` 27 | 28 | ###Usage 29 | 30 | ####Step 1 - install 31 | 32 | ``` 33 | npm install react-native-navigation-bar --save 34 | ``` 35 | 36 | ####Step 2 - import and use in project 37 | ```javascript 38 | import NavigationBar from 'react-native-navigation-bar'; 39 | 40 | 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /doc/ui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beefe/react-native-navigation-bar/017a1cb61b99b9760dbddc1a4e29494570d80623/doc/ui.jpg -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * react-native-navigation-bar main 3 | */ 4 | 5 | import React, { 6 | Component, 7 | PropTypes 8 | } from 'react'; 9 | 10 | import { 11 | StyleSheet, 12 | View, 13 | Image, 14 | Text, 15 | TouchableOpacity, 16 | Dimensions, 17 | Platform 18 | } from 'react-native'; 19 | 20 | let width = Dimensions.get('window').width; 21 | 22 | export default class NavigationBar extends Component{ 23 | 24 | static propTypes = { 25 | title: PropTypes.string.isRequired, 26 | //not include the height of statusBar on ios platform 27 | height: PropTypes.number, 28 | titleColor: PropTypes.string, 29 | backgroundColor: PropTypes.string, 30 | leftButtonTitle: PropTypes.string, 31 | leftButtonTitleColor: PropTypes.string, 32 | onLeftButtonPress: PropTypes.func, 33 | rightButtonTitle: PropTypes.string, 34 | rightButtonTitleColor: PropTypes.string, 35 | onRightButtonPress: PropTypes.func 36 | }; 37 | 38 | static defaultProps = { 39 | height: 44, 40 | titleColor: '#000', 41 | backgroundColor: '#f5f3f4', 42 | leftButtonTitle: null, 43 | leftButtonTitleColor: '#000', 44 | rightButtonTitle: null, 45 | rightButtonTitleColor: '#000' 46 | }; 47 | 48 | componentWillMount(){ 49 | this.state = this._getStateFromProps(this.props); 50 | } 51 | 52 | componentWillReceiveProps(newProps){ 53 | let newState = this._getStateFromProps(newProps); 54 | this.setState(newState); 55 | } 56 | 57 | shouldComponentUpdate(nextProps, nextState, context) { 58 | return JSON.stringify([nextState, context]) !== JSON.stringify([this.state, context]); 59 | } 60 | 61 | _getStateFromProps(props){ 62 | return { 63 | ...props 64 | }; 65 | } 66 | 67 | _renderLeftIcon() { 68 | if(this.state.leftButtonIcon){ 69 | return ( 70 | 71 | ); 72 | } 73 | return null; 74 | } 75 | 76 | _renderRightIcon() { 77 | if(this.state.rightButtonIcon){ 78 | return ( 79 | 80 | ); 81 | } 82 | return null; 83 | } 84 | 85 | _onLeftButtonPressHandle(event) { 86 | let onPress = this.state.onLeftButtonPress; 87 | typeof onPress === 'function' && onPress(event); 88 | } 89 | 90 | _onRightButtonPressHandle(event) { 91 | let onPress = this.state.onRightButtonPress; 92 | typeof onPress === 'function' && onPress(event); 93 | } 94 | 95 | render() { 96 | let height = Platform.OS === 'ios' ? this.state.height + 20 : this.state.height; 97 | return ( 98 | 102 | 103 | 104 | 105 | {this._renderLeftIcon()} 106 | 107 | {this.state.leftButtonTitle} 108 | 109 | 110 | 111 | 112 | 113 | 114 | {this.state.title} 115 | 116 | 117 | 118 | 119 | 120 | {this._renderRightIcon()} 121 | 122 | {this.state.rightButtonTitle} 123 | 124 | 125 | 126 | 127 | 128 | ); 129 | } 130 | }; 131 | 132 | let styles = StyleSheet.create({ 133 | container: { 134 | flex: 1, 135 | position: 'absolute', 136 | top: 0, 137 | left: 0, 138 | flexDirection: 'row', 139 | width: width 140 | }, 141 | leftButton: { 142 | flex: 1, 143 | flexDirection: 'row', 144 | justifyContent: 'flex-start', 145 | alignItems: 'center', 146 | width: 90, 147 | paddingTop: 1, 148 | paddingLeft: 8 149 | }, 150 | leftButtonIcon: { 151 | width: 12, 152 | height: 15, 153 | marginRight: 6 154 | }, 155 | leftButtonTitle: { 156 | fontSize: 15 157 | }, 158 | title: { 159 | flex: 1, 160 | alignItems: 'center', 161 | paddingTop: 1, 162 | justifyContent: 'center', 163 | width: width - 200, 164 | overflow: 'hidden' 165 | }, 166 | titleText: { 167 | fontSize: 18, 168 | fontWeight: '400' 169 | }, 170 | rightButton: { 171 | flex: 1, 172 | flexDirection: 'row', 173 | justifyContent: 'flex-end', 174 | alignItems: 'center', 175 | width: 90, 176 | paddingTop: 1, 177 | paddingRight: 8 178 | }, 179 | rightButtonIcon: { 180 | width: 10, 181 | height: 15 182 | }, 183 | rightButtonTitle: { 184 | fontSize: 15 185 | } 186 | }); 187 | 188 | if(Platform.OS === 'ios'){ 189 | styles = { 190 | ...styles, 191 | container: { 192 | flex: 1, 193 | position: 'absolute', 194 | top: 0, 195 | left: 0, 196 | flexDirection: 'row', 197 | width: width, 198 | paddingTop: 20 199 | }, 200 | rightButton: { 201 | flex: 1, 202 | flexDirection: 'row', 203 | justifyContent: 'flex-end', 204 | alignItems: 'center', 205 | width: 90, 206 | paddingTop: 1, 207 | paddingRight: 8 208 | } 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-navigation-bar", 3 | "version": "0.2.1", 4 | "description": "react-native-navigation-bar", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/beefe/react-native-navigation-bar.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "ios", 16 | "android", 17 | "navigation" 18 | ], 19 | "author": { 20 | "name": "zooble", 21 | "email": "wenliang.web@gmail.com" 22 | }, 23 | "engines": { 24 | "node": ">=4" 25 | }, 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/beefe/react-native-navigation-bar/issues" 29 | }, 30 | "homepage": "https://github.com/beefe/react-native-navigation-bar#readme" 31 | } --------------------------------------------------------------------------------