├── .DS_Store ├── .npmignore ├── README.md ├── RootTabBar.js ├── TabBarNavigator.js ├── TabBarNavigatorExample ├── .babelrc ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── TabNavigatorView.js ├── __tests__ │ ├── index.android.js │ └── index.ios.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── tabbarnavigatorexample │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle ├── index.android.js ├── index.ios.js ├── ios │ ├── TabBarNavigatorExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── TabBarNavigatorExample.xcscheme │ ├── TabBarNavigatorExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── TabBarNavigatorExampleTests │ │ ├── Info.plist │ │ └── TabBarNavigatorExampleTests.m └── package.json ├── index.js └── package.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DickyT/react-native-tabbar-navigator/1c87dcac159df68f9f396f89789c593a90ee8881/.DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | TabBarNavigatorExample/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Native TabBar Navigator (aka React Native Tanner Navigator) 2 | =================== 3 | [![npm version](https://badge.fury.io/js/react-native-tabbar-navigator.svg)](https://badge.fury.io/js/react-native-tabbar-navigator) 4 | [![MIT](https://img.shields.io/dub/l/vibe-d.svg)]() 5 | 6 | **THIS PACKAGE IS NO LONGER MAINTAINED SINCE 2017 AND DOES NOT WORK WITH LATEST REACT NATIVE** 7 | 8 | (aka React Native Tanner Navigator). A component which builds excellent Navigator(NavigationController) + TabBar(TabBarController) based application, have a good solution for implementing **hidesBottomBarWhenPushed** in iOS. 9 | 10 | ![PREVIEW](https://cloud.githubusercontent.com/assets/4535844/21953824/7924d0b2-da17-11e6-8001-caad1150fdcc.gif) 11 | 12 | ## SPECIAL NOTE FOR 0.4.0 13 | Please don't update to 0.4.0 if you are using previous version of this plugin, because the way to use it is completely different. 14 | 15 | ## UPDATEs 16 | 0.4.0 Supports React Native `0.40`, optimized usages. 17 | 18 | 0.3.0 Test with several projects, and no obviously bug, so `0.3.0` will be a stable version. 19 | 20 | 0.2.8 Added a shadow style, make it more native, [preview](https://github.com/DickyT/react-native-tabbar-navigator/wiki/Description-of-0.2.8) 21 | 22 | 0.2.7 Remove the hack on last commit, [reason](https://github.com/DickyT/react-native-tabbar-navigator/wiki/Description-of-removing-the-scale-hack) 23 | 24 | 0.2.6 Disabling the wired Y scale when pushing the view, which make it more similar to `NavigatorIOS` 25 | 26 | 0.2.4 Fixed a logical bug which caused a re-render issue. 27 | 28 | 0.2.3 New feature by `@aerofs`, title component can be customize now. 29 | 30 | 0.2 Stable Version 31 | 32 | 0.1 Project First Commit 33 | 34 | ## Installation 35 | 36 | `cd` to your React Native project directory and run 37 | 38 | `npm i --save react-native-tabbar-navigator` 39 | 40 | ## Usage 41 | 42 | ```jsx 43 | import { TabNavigator } from 'react-native-tabbar-navigator'; 44 | ``` 45 | 46 | ### The basic usages: 47 | ```jsx 48 | function RootView() { 49 | let navItems = [ 50 | { 51 | leftItem: { 52 | component: (), 53 | onPress: (isRoot, pop) => { 54 | ActionSheetIOS.showActionSheetWithOptions({ 55 | options: ['View Account Info', 'My Orders', 'Sign Out'], 56 | destructiveButtonIndex: 2 57 | }, () => {}); 58 | } 59 | }, 60 | rightItem: { 61 | component: (), 62 | onPress: (isRoot, pop) => { 63 | ActionSheetIOS.showActionSheetWithOptions({ 64 | options: ['Share', 'Scan QR Code', 'Cancel'], 65 | destructiveButtonIndex: 2 66 | }, () => {}); 67 | } 68 | } 69 | }, 70 | { 71 | title: { 72 | component: () 73 | }, 74 | rightItem: { 75 | component: (), 76 | onPress: (isRoot, pop) => { 77 | ActionSheetIOS.showActionSheetWithOptions({ 78 | options: ['Account Settings', 'App Settings', 'Cancel'], 79 | destructiveButtonIndex: 2 80 | }, () => {}); 81 | } 82 | } 83 | } 84 | ]; 85 | return ( 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ); 95 | } 96 | ``` 97 | ### API 98 | 99 | **NOTE** 100 | Be sure to know the basic usage of `` and `` 101 | 102 | For this plugin, there are 2 components that you need to know. 103 | 104 | `` 105 | 106 | Property | Description | Type | Default 107 | -------- | ----------- | ---- | ------- 108 | navBarTintColor | Default font color of navigation bar. | string | '#FFFFFF' 109 | navTintColor | Default background color of navigation bar. | string | '#FF2D55' 110 | children | *ONLY* accepts ``s as children components. | Array\<`React.Component`\> | [] 111 | ...props | The other props that passed to this Component is directly passed to the corresponding `` and override *any* default props in this plugin. Be sure to read the source code first, or you should not override the props below: `style`, `initialRoute`, `renderScene`, `navigationBar`, `sceneStyle`. 112 | 113 | `` 114 | 115 | Property | Description | Type | Default 116 | -------- | ----------- | ---- | ------- 117 | title | Title of the corresponding Tab and Navigation Title. You can customize Navigation Title by `navItems` property. | string 118 | defaultTab | Set this Item as default selcted tab. | bool | false 119 | navItems | Detailed API below. | Array\<`NavItemConfig`\> | *REQUIRED* 120 | children | *ONLY* accepts single child element. | `React.Component` | *REQUIRED* 121 | ...props | The other props that passed to this Component is directly passed to the corresponding ``. 122 | 123 | `NavItemConfig` 124 | 125 | Property | Description | Type | Default 126 | -------- | ----------- | ---- | ------- 127 | leftItem | Component settings for TopLeft navigation item. | `NavigationItem` 128 | rightItem | Component settings for TopRight navigation item. | `NavigationItem` 129 | title | Navigation title for corresponding Tab. | string \| `NavigationItem` | TabNavigator.Item.props.title 130 | 131 | `NavigationItem` 132 | 133 | Property | Description | Type | Default | Example 134 | -------- | ----------- | ---- | ------- | ------- 135 | component | React Component for corresponding position. | `React.Component` | null | `More` 136 | onPress | This function is passed to the component `onPress` prop, make sure to receive `onPress` in `component` and handle it. | `NavigationItemEvent` | `() => {}` | `(isRoot, pop) => { if (isRoot) pop() }` 137 | 138 | `NavigationItemEvent` 139 | 140 | This is actually a `function` type. When this function is called, it will pass 3 arguments. 141 | 142 | Order | Argument | Description | Type 143 | ----- | -------- | ----------- | ---- 144 | 1 | isRoot | Is root route or not, if it is root route, you should not call the 2nd `popHandler` argument. | bool 145 | 2 | popHandler | A shortcut to `navigator.pop`, calling this can `pop` the current navigator. | function 146 | 3 | navigator | The current navigator. 147 | 148 | 149 | ### Advanced usage 150 | 151 | For more advanced examples, please check out the example app. 152 | 153 | ## How to run the example App? 154 | Xcode. 155 | 156 | Questions 157 | -------------- 158 | If something is undocumented here, and it is not clear with you, feel free to create an issue here, I will tried my best to answer you. 159 | 160 | Anything else 161 | -------------- 162 | Open a new issue to report bugs or request new features. Feel free to create Pull Request, I will be happy to merge if it is a good PR. 163 | 164 | My email `me@idickyt.com` 165 | 166 | Facebook [Dicky Tsang](https://www.facebook.com/idickytsang) 167 | 168 | Sina Weibo [@桐乃](https://weibo.com/kirinokousaka) 169 | -------------------------------------------------------------------------------- /RootTabBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Root TabBar for TabBarNavigator 3 | * https://github.com/DickyT/react-native-tabbar-navigator 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | StyleSheet, 10 | Text, 11 | View, 12 | TabBarIOS 13 | } from 'react-native'; 14 | 15 | class RootTabBar extends Component { 16 | constructor(props) { 17 | super(props); 18 | this.state = { 19 | selectedTab: this.props.selectedTab || 0 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | setTimeout(() => { 25 | this.props.onChange(this.state.selectedTab); 26 | }, 0); 27 | } 28 | 29 | switchTab(index) { 30 | this.setState({ selectedTab: index }); 31 | this.props.onChange(index); 32 | } 33 | 34 | items() { 35 | let componentList = []; 36 | 37 | React.Children.map(this.props.children, (component, index) => { 38 | let tabComponent = React.cloneElement(component.props.children, { 39 | navigator: this.props.navigator 40 | }); 41 | // add to tabbar 42 | componentList.push( 43 | this.switchTab(index)} 47 | {...component.props}> 48 | { tabComponent } 49 | 50 | ); 51 | }); 52 | return componentList; 53 | } 54 | 55 | render() { 56 | return ( 57 | 58 | {this.items()} 59 | 60 | ); 61 | } 62 | }; 63 | 64 | RootTabBar.propTypes = { 65 | onChange: React.PropTypes.func.isRequired 66 | }; 67 | 68 | export default RootTabBar; 69 | -------------------------------------------------------------------------------- /TabBarNavigator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Navigator Wrapper for TabBarNavigator 3 | * https://github.com/DickyT/react-native-tabbar-navigator 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Navigator, 13 | TouchableOpacity, 14 | Image 15 | } from 'react-native'; 16 | import RootTabBar from './RootTabBar'; 17 | 18 | const __STYLE = StyleSheet.create({ 19 | flexEnabled: { 20 | flex: 1 21 | }, 22 | leftBackButton: { 23 | flex: 1, 24 | justifyContent: 'center', 25 | alignItems: 'center', 26 | paddingLeft: 7 27 | }, 28 | leftBackButtonWrapper: { 29 | width: 20, 30 | height: 20 31 | }, 32 | navBar: { 33 | alignItems: 'center', 34 | borderBottomWidth: 1, 35 | borderBottomColor: '#ddd' 36 | }, 37 | navBarTitle: { 38 | flex: 1, 39 | justifyContent: 'center', 40 | fontSize: 17, 41 | marginTop: 10 42 | }, 43 | mainTabBar: { 44 | alignItems: 'center', 45 | borderBottomWidth: 1, 46 | borderBottomColor: '#ddd' 47 | }, 48 | sceneStyle: { 49 | shadowColor: '#000000', 50 | shadowOpacity: .5, 51 | shadowOffset: { 52 | height: 1, 53 | width: 0 54 | }, 55 | overflow: 'visible', 56 | flex: 1, 57 | marginTop: 64, 58 | backgroundColor: '#ffffff' 59 | }, 60 | mainNavigator: { 61 | backgroundColor: 'transparent' 62 | } 63 | }); 64 | 65 | const lightBackArrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAA2FBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8lb+eLAAAAR3RSTlMAAQIDBAYICQsMDQ4QERQXGBofJykqODlAQUlMUldeYWhrbW98f4KMlJWYnZ6goqutr7K0tbrAwcPMzs/T5ujp6+/z9ff7/dlYrXMAAAJCSURBVHja7dBXUlQBFEXR+wwtmHNWzBgxZzHDnf+M/LHUgg52lT++s/YM1q7639p/6enmxxeXJxXaxW/d3d1bVzL9d/pX94ZA/3r/0caQ7Q88sMMfd2CXP+zAFH/Ugan+oAMz/DEHZvpDDszxRxyY6w84sMA/+gML/SM/8Bf+7gfh/u4b4f7uo+H+Xg/39/ch2989Cff3ari/94X734T7+0K4//2Q7f+ymu3/eizcf5yfn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn39a18P9J8P99SrcvxLur9Ph/jq31IDzo/PXmaUGfD4yugEHO/3A2/QDpzr9wK30A8NDBxxwwAEHHHDAAQcccMABBxxwwAEHHHBg2QOHHXDAAQcccMABBxxwYGwHHjnggAMOOOCAAw444IADDjjggAMOOOCAAw444IADDjjggAMOOOCAAw444IADDjjggANLHvjkgAMOOOCAAw444IADDjjggAMOOOCAAw6M7sCGAw444IADDix5YHOSfuB1pR84m37gZaUf2Jt+YKXCDxyo7ANbQ2UfuFuVfeBEZR+4XRV94MlQ0Qee7alKPjBu/+IDY/cvOjB+//wDCf55BzL8sw88D/HPOpDjn34gyT/tQJZ/94E0/84Def6q4f5v/+NAf1Vd3f7pvzlUZitr77a3P1w7VPon/QDqIm8Mnw8FiAAAAABJRU5ErkJggg=='; 66 | 67 | class TabBarNavigator extends Component { 68 | constructor(props) { 69 | super(props); 70 | 71 | this.state = { 72 | selectedTab: 0 73 | }; 74 | 75 | this.navRouter = { 76 | LeftButton: this.LeftButton.bind(this), 77 | RightButton: this.RightButton.bind(this), 78 | Title: this.Title.bind(this), 79 | }; 80 | 81 | this.navBar = ( 82 | 86 | ); 87 | 88 | // find defaultTab 89 | React.Children.map(this.props.children, (component, index) => { 90 | if (component.props.defaultTab) { 91 | this.state.selectedTab = index; 92 | } 93 | }); 94 | 95 | this.initialRoute = { 96 | isRoot: true, 97 | component: 98 | }; 99 | } 100 | 101 | tabChanged(index) { 102 | this.setState({ 103 | selectedTab: index 104 | }); 105 | this.props.onChange(index); 106 | } 107 | 108 | LeftButton({ isRoot, navItems: { leftItem } = {} } = {}, navigator) { 109 | if (isRoot) { 110 | // handle dynamic left item with TabBar 111 | let currentTab = this.props.children[this.state.selectedTab].props.navItems; 112 | leftItem = currentTab.leftItem || null; 113 | } 114 | 115 | if (leftItem) { 116 | // if left item is set, not using default component 117 | return React.cloneElement(leftItem.component, { 118 | onPress: () => leftItem.onPress && leftItem.onPress(isRoot, navigator.pop, navigator) 119 | }); 120 | } 121 | else if (!isRoot) { 122 | // not root and left item not assigned, using default component 123 | return ( 124 | 127 | 129 | 130 | ); 131 | } 132 | } 133 | 134 | RightButton({ isRoot, navItems: { rightItem } = {} } = {}, navigator) { 135 | if (isRoot) { 136 | // handle dynamic right item with TabBar 137 | let currentTab = this.props.children[this.state.selectedTab].props.navItems; 138 | rightItem = currentTab.rightItem || null; 139 | } 140 | 141 | if (rightItem) { 142 | // if right item is set, not using default component 143 | return React.cloneElement(rightItem.component, { 144 | onPress: () => rightItem.onPress && rightItem.onPress(isRoot, navigator.pop, navigator) 145 | }); 146 | } 147 | } 148 | 149 | Title({ isRoot, title } = {}, navigator) { 150 | if (isRoot) { 151 | // handle dynamic title component with TabBar 152 | let componentProps = this.props.children[this.state.selectedTab].props; 153 | let currentTab = componentProps.navItems.title ? componentProps.navItems : componentProps; 154 | title = currentTab.title || ''; 155 | } 156 | 157 | if (title) { 158 | let { component, text, onPress } = title; 159 | if (typeof(title) == 'string') { 160 | text = title; 161 | } 162 | 163 | if (component) { 164 | // set title component 165 | return React.cloneElement(component, { 166 | onPress: () => onPress && onPress(isRoot, navigator.pop, navigator) 167 | }); 168 | } 169 | else if (text) { 170 | // set title text 171 | return ( 172 | 173 | {text} 174 | 175 | ); 176 | } 177 | } 178 | } 179 | 180 | renderScene({ component }, navigator) { 181 | return React.cloneElement(component, { 182 | navigator: navigator 183 | }); 184 | } 185 | 186 | render() { 187 | return ( 188 | 195 | ); 196 | } 197 | } 198 | 199 | TabBarNavigator.propTypes = { 200 | navTintColor: React.PropTypes.string, 201 | navBarTintColor: React.PropTypes.string, 202 | onChange: React.PropTypes.func.isRequired 203 | }; 204 | 205 | TabBarNavigator.defaultProps = { 206 | navTintColor: '#FFFFFF', 207 | navBarTintColor: '#FF2D55', 208 | onChange: () => {} 209 | }; 210 | 211 | TabBarNavigator.Item = () => ; 212 | 213 | TabBarNavigator.Item.propTypes = { 214 | navItems: React.PropTypes.object, 215 | children: React.PropTypes.element.isRequired 216 | }; 217 | 218 | TabBarNavigator.Item.defaultProps = { 219 | navItems: {} 220 | }; 221 | 222 | export default TabBarNavigator; 223 | -------------------------------------------------------------------------------- /TabBarNavigatorExample/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /TabBarNavigatorExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /TabBarNavigatorExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | module.system=haste 26 | 27 | experimental.strict_type_args=true 28 | 29 | munge_underscores=true 30 | 31 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 32 | 33 | suppress_type=$FlowIssue 34 | suppress_type=$FlowFixMe 35 | suppress_type=$FixMe 36 | 37 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 40 | 41 | unsafe.enable_getters_and_setters=true 42 | 43 | [version] 44 | ^0.36.0 45 | -------------------------------------------------------------------------------- /TabBarNavigatorExample/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /TabBarNavigatorExample/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | android/app/libs 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md 50 | 51 | fastlane/report.xml 52 | fastlane/Preview.html 53 | fastlane/screenshots 54 | -------------------------------------------------------------------------------- /TabBarNavigatorExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /TabBarNavigatorExample/TabNavigatorView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * react-native-tabbar-navigator sample app 3 | * https://github.com/DickyT/react-native-tabbar-navigator 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Navigator, 13 | TouchableOpacity, 14 | Image, 15 | ActionSheetIOS, 16 | SegmentedControlIOS, 17 | Button 18 | } from 'react-native'; 19 | import { TabNavigator } from 'react-native-tabbar-navigator'; 20 | 21 | const __STYLE = StyleSheet.create({ 22 | flexEnabled: { 23 | flex: 1 24 | }, 25 | navItem: { 26 | flex: 1, 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | paddingLeft: 12, 30 | paddingRight: 12 31 | }, 32 | whiteColor: { 33 | color: '#ffffff' 34 | }, 35 | segmentCtrlView: { 36 | flex: 1, 37 | flexDirection: 'row', 38 | alignItems: 'center' 39 | }, 40 | segmentCtrl: { 41 | width: 160 42 | }, 43 | view: { 44 | flex: 1, 45 | backgroundColor: '#F7F7F7', 46 | justifyContent: 'center', 47 | alignItems: 'center' 48 | }, 49 | titleStyle: { 50 | color: '#007AFF', 51 | fontSize: 22, 52 | marginTop: -200 53 | }, 54 | bodyStyle: { 55 | color: '#2B2B2B', 56 | backgroundColor: '#ffffff', 57 | padding: 15, 58 | marginTop: 50, 59 | marginBottom: 50 60 | } 61 | }); 62 | 63 | const tabOneIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABU1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8mO/2mAAAAcHRSTlMAAQIDBAYHCAkKCwwNDg8QERIUFRcYGxweICIjJSgqLC0vMDEyNjc6PD5AQUJDREVGR05PVFVXWVthYmZnaGltcHN4fH+AgoiPkZSXmJqdnqKoq62wtbm8vsHDxcfOz9HV19rc4Obo6evt8fX3+fv9oZ9KRwAAAeFJREFUWMPt1NdT1FAYhvE3YRFWLAsWxIYoIkWlCHZQmiCoIIIFFFFAl/78/1deGJ1NOCV4Zrza7y7fOc9vZjczkapTnZxzGXbvhwBjwNcQYBMYCegbAVoCgAFgPwoAloDXuW8XFt/EmQ1ApySp9G3Y23+Cd2mhFaAoSaUyjPp7GE/tJoBVSYp+gEf43XMvtSwDj//+GU4h6Z+klk0AzZKkmvduwdhrENhNXqJbMPf6ALz88+ASLH0tQIf8gqXXDYA6eYXCsrnXFPC5cmEWrL22gYfyCfb+LMA5eQR7rwfAdnaZFQor1l4rwJTcgqs/BtAup+DqdROgVi4hWnb0mgY+Gk8SYVgnANgrGm9FO8CQ2e4CYE3qB+B7venSeYAzxr4NgHJJTuERsOXrXcIXYNLbS30WoR7gmr+3CrcACjl6qdcozAJL1v50amkSoj1g4FB/3dRLdwFYrxQuADTm7E3CU2Azdy/dyQprwJjpC2fuDwnHAa4coZdup4RugJqj9BlhDlgw/P6f9l7qAWBGkuJ9oL/yMD7w9olwVZIuApxKHU76e6kb2iRJz4CNzOELfy+1JB/xdeB59rC9qLxzEuCS/n16gYM4AHgLzAf0MUBPANAA0BAAqHlk9ZWqU53/Nb8AOJAKnq/8xU4AAAAASUVORK5CYII='; 64 | const tabTwoIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAB5lBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ZIycPAAAAoXRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGhscHR8gISIjJCYnKCkqKywtLi8wMjM0NTY3OTo7PD0/QEJDREVGR0lKTE1PUFFSVFVWV1lbXF5fYWJjZGZnaGlrbG1wc3R1eXt8fn+AgoOFhouMjo+RkpSVl5udnqKlpqiqr7CytLW3ubq8vsDBw8XKzs/R09fZ2t7g4ubo6evt7/H19/n7/ZUDJF8AAAMaSURBVBgZtcGLW1NlAAfg3zkbu8gEnaOsBFLQJgKCZVEmecHyXtpMjZJuFGo3LZVQNC0xCkXQgbiNnd9/2s52zvd952zsfPQ8vS/qMkLhkIn/xHxlaOxBjjZr9trHO+JYjfDAOP1mMxugqeWyxZr+fsNAsNQEV5Z920B95tesb+ZF1NM+z0CfGFjRF9TxTxNqM8epJ7cJtUSnqcvqR7XIHFdhAH7mFFdlM3yuc3XySXicpWN+gfUUZgqseBqCYiMdj4H44AxrK4y8ALxJx0VIxkM6TsPWdpvV8kdCKInStRXCObpaUdGdte4M725PJmJrml7qOvrjIr9rQMUMHdkQHI0UGuEwTXhE4bpC1xk4LlMwEegzuopRlDVSakCgbyicQdkwpSYEukEhb6LEeE5pAEGMZUp9KOmk4gSCRJcp3UTJKKX7BgK9RUUYwBKltdBwjdJrQILSGHSkKJ0DeigloWWSwh/AhxQWoOcghWXgBwoXoaeFUhR3KXwEPTFKScxTGIQek1IrchQGocek1AGLwnHoiVBKI0fhU+hJUOrAPIUr0PMypVZMUXgGPQcppfAzpTi0/EIpirOUXocOI0fJwC5Kt6BjG6W/gCQVKWi4Q2kEMPKUbiJYmopeAD9RcQhB4otURAH0UfUu6ovPUfEAJaEiVSMm6kgvULUHtjGWZYssm92JlSSv0sNqgC1F2wFg4zTL5o41o1rDznH6fIWKCZY8WYfNGKUj92tmC6TY4W8fsdpaVLTQVtyL9qbrdBXiUHzPGkbhusSyfphGlo6TUMUsVilE4Ios0ZaPhXrbLFYk4DHBKvsg9bLsS6BvXZa2x/A6Sr9JqC7RVowgFTG2nM7sT8JnN32W4lAZ07QNA+hM42ronU54bafPq/CKP6WtBzYDVdL0OgC/5ue0nQ+jpjQ9MqiWXGTZxPBQ/66hD+CVpiqDWhJzlCbhtZ2KQ6gt/BuF2/DqopDrwIqOWXT8Dq9uuibXoI7191hxD17drMi9hwA9s7RNwauHNuvzMIJ1/UnyBrzaSC6dikBP84kLjfB5/8JWA/+HfwEojio6fUk+FAAAAABJRU5ErkJggg==' 65 | const shareIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA2FBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8lb+eLAAAAR3RSTlMAAQIEBQYHCAsMDxESExQVGhwdHyQmKiwtLzA0Njg5R1ZbXF9pb3N+f5GXmJqbnqCjqKqttbm6wMPH0dPV2dzk6e/x8/X3/T2VMTsAAAFbSURBVFjD7ZXZWsIwEIXTICKuNIiKiru4r7igUrWinvd/Iy9KWkgnaWNu/Pxy7jKd8+eUkgljXl4W6nJHAKLQEQC4hQDgFgKAW4gE4BACUr8NkQLUENCpv8V1fRMhNPbHpjaBEoK0v68bXkEJQflPplgRIAtB+LfHjbXWznHv5e0r3zYKkat/Lmfu+b0B9EpCqNXhYmpfvUeBujwH+G5Ie7OPYkVhClB+M36EMoqEBjDzXMo//goT/oW45PaMBszGZbenAZUo+ybXu+1GvcIDRm9PA05Hpdf9JYu/cta6khR6LcNhEvkHWWUAAHeh4SyQxzktrAGIO6aBIsgHaeEGeKhZjDQVUAXOAsNQFTqyXLdxbjfWVcDhU6C/WIRh2sr17Zzl1aYCDrSXqzDPe7muF1/vG+bPWKTqBZwAmx9wAUxf5nqtAJ0hnABXVK8NAH8bYCMP+H8ALy/G2A8xvHk9GDO2vgAAAABJRU5ErkJggg==' 66 | const moreIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA7VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9sDJFPAAAATnRSTlMAAQMEBQkMEBETGRodICEiIyUmLTAxNTY4O0JKS1ZYWVtdYmNmZ3FzdH+ChYmOj5GVmpueoK+wtLW3ur7Ax8jP0dfZ2tzg4uTv8fP19/tDFvODAAAA+ElEQVRYw+2T2VLCQBBFLwRBRTYFBRSURaMoIKsrogEXEun//xwfAqQnMUIVPvDQ563r3Jnqmu4BBEEQBOGfSdXH5qC65RURfWi9Xe16Rej06eujlbaLwC0REdH00B0r2IIu3CI+sUVPA4AGzUmqsfxClFWxM52LHoDYIkZGgMc0yzFh5YJ7R2SBa6eiPR7LMlHkIszEHWCw8pjndCY6XBwwQcA3q0o8d8PEIxc5fkFQ6eDEr4PuHx2s/QZsCqMVp/CgTAHN5XtQ8duDvrKJR36bqLtFwpyd1+x6v/Fuvpz/8he2L18toxb1itDZ8+SznYEgCIIgbBw/0r5ytCbnafQAAAAASUVORK5CYII='; 67 | const settingsIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAbFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8+T+BWAAAAI3RSTlMAAgsSGyYrMUZHVWRmdHV+iI+RnabAwcXHyNHT2drv8fP3+fXCL1oAAACCSURBVFjD7Za3CsAwEEOd3ntxerH//x8zmAyBDOacLXqr0WE46RBj4F842bBPlUfWh1JREvWuvImfD9IMjgGSm29Bm8jQB4w5+XjMtYdIAg2CZtm6xKbKrVbZ9fSJA4o7MEL/D7hIX580yhZefSB8AyeuW5/aiCRAzUPNQ81DzfstFyjKk29ZOBvjAAAAAElFTkSuQmCC'; 68 | const dropDownIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA6lBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Le70HAAAATXRSTlMAAQMEBQYLDA4PEBESExQVFhclKCkqKy4vMjQ2Nzg5OjxBTl5hZGZnaWxvcXN1d3l7fI6bnqKlpqqrrbCytLnR1dna3N7g4unz9ff5+/iYwqsAAAERSURBVBgZ7cHXQsJAAATATbEHRbFi74JdI8QK0hSS/f/fEQtISLu7vGYGmUxmYPnadpRU7w4MACdMoa0DLtMoAA2mkQf2mcIb+ipU9jmJPqNBVSv4YblUc4g/RSq5x1CJCmo6/jmU1p3GCKNJWavwsVzKOcKYTUqxEVCmhLqOoEcK684ghNmiqDWEynkUc4wI2xTygEjnFFDXEe2JiXqziGG2mGQdseY9xjtFgh3GqiDRBWO8G0ikPTNSbw4CzDajbEDIgsdwZxC0y1BVCLtkiIYBYdoLA1wLEswOxxUhJe/RrwRJe/RxIO2KI5oGpGmvHHJzUDDR4cAWlCx6/FWGooLLbzdQNnXb+rCXkMlkkn0BMhSuRHcWyPUAAAAASUVORK5CYII='; 69 | 70 | 71 | function NavItemText(props) { 72 | return ( 73 | 74 | User 75 | 76 | ); 77 | } 78 | 79 | function NavItemTextBack(props) { 80 | return ( 81 | 82 | Back 83 | 84 | ); 85 | } 86 | 87 | function NavItemIcon(props) { 88 | return ( 89 | 90 | 91 | 92 | ); 93 | } 94 | 95 | function NavItemIconSettings(props) { 96 | return ( 97 | 98 | 99 | 100 | ); 101 | } 102 | 103 | function NavItemSegmentCtrl(props) { 104 | return ( 105 | 106 | 111 | 112 | ); 113 | } 114 | 115 | function TabOneIndex({ navigator, ...props }) { 116 | function onPress() { 117 | navigator.push({ 118 | title: '#1 Next Page', 119 | component: (), 120 | navItems: { 121 | rightItem: { 122 | component: (), 123 | onPress: (isRoot, pop) => { 124 | pop(); 125 | } 126 | } 127 | } 128 | }); 129 | } 130 | return ( 131 | 132 | 133 | react-native-tabbar-navigator 134 | 135 | 136 | Customizing Top-Left and Top-Right navigation item. 137 | 138 |