bug修复

我发现我不能把它和tabbar完美结合，所以我只能另寻其他办法

Author: mayacger

index.js

@@ -10,11 +10,17 @@ import React, {
   View,
   Component,
   Platform,
+  Text,
 } from 'react-native';
 
 import NavBarContainer from './src/components/NavBarContainer';
+import Layout from './src/components/Layout';
+import Tabitem from './src/components/Tabitem';
+import Tab from './src/components/Tab';
+import TabBar from './src/components/TabBar';
+import Badge from './src/components/Badge';
 
-export default class Tabs extends Component {
+export default class Nav extends Component {
 
 
   constructor (props) {
@@ -27,22 +33,45 @@ export default class Tabs extends Component {
       dragStartX: null,
       didSwitchView: null,
     }
-    this.onDidFocus = this.onDidFocus.bind(this);
     this.onBack = this.onBack.bind(this);
     this.onForward = this.onForward.bind(this);
     this.customAction = this.customAction.bind(this);
     this.renderScene = this.renderScene.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
   }
 
   /*
    * This changes the title in the navigation bar
    * It should preferrably be called for "onWillFocus" instad >
    * > but a recent update to React Native seems to break the animation
+   * onDidFocus 已废弃
    */
   onDidFocus (route) {
     this.setState({ route: route });
   }
 
+
+  // _setNavigatorRef (navigator) {
+  //   if (navigator !== this._navigator) {
+  //     this._navigator = navigator;
+  //
+  //     if (navigator) {
+  //       var callback = (event) => {
+  //         this.setState({ route: route });
+  //       };
+  //       // Observe focus change events from the owner.
+  //       this._listeners = [
+  //         navigator.navigationContext.addListener('willfocus', callback),
+  //         navigator.navigationContext.addListener('didfocus', callback),
+  //       ];
+  //     }
+  //   }
+  // }
+  //
+  // componentWillUnmount () {
+  //   this._listeners && this._listeners.forEach(listener => listener.remove());
+  // }
+
   onBack (navigator) {
     if (this.state.route.index > 0) {
       navigator.pop();
@@ -58,6 +87,8 @@ export default class Tabs extends Component {
     this.props.customAction(opts);
   }
 
+
+
   renderScene (route, navigator) {
 
     var goForward = function(route) {
@@ -102,6 +133,9 @@ export default class Tabs extends Component {
       return true;
     };
 
+
+
+
     var Content = route.component;
 
     // Remove the margin of the navigation bar if not using navigation bar
@@ -125,6 +159,7 @@ export default class Tabs extends Component {
           reset={goToFirstRoute}
           customAction={customAction}
         />
+
       </View>
     )
 
@@ -159,21 +194,89 @@ export default class Tabs extends Component {
       />
     }
 
+
+    //toRoute in Tab
+    let  _renderTab = function (item) {
+      let icon;
+      if (item.props.selected) {
+        if (item.props.renderSelectedIcon) {
+          icon = item.props.renderSelectedIcon();
+        } else if (item.props.renderIcon) {
+          let defaultIcon = item.props.renderIcon();
+          icon = React.cloneElement(defaultIcon, {
+            style: [defaultIcon.props.style, styles.defaultSelectedIcon],
+          });
+        }
+      } else if (item.props.renderIcon) {
+        icon = item.props.renderIcon();
+      }
+
+      let badge;
+      if (item.props.renderBadge) {
+        badge = item.props.renderBadge();
+      } else if (item.props.badgeText) {
+        badge = <Badge>{item.props.badgeText}</Badge>;
+      }
+      return (
+        <Tab
+          changeRoute={item.props.changeRoute}
+          title={item.props.title}
+          titleStyle={[
+            item.props.titleStyle,
+            item.props.selected ? [
+              styles.defaultSelectedTitle,
+              item.props.selectedTitleStyle,
+            ] : null,
+          ]}
+          badge={badge}
+          onPress={item.props.onPress}
+          hidesTabTouch={this.props.hidesTabTouch}>
+          {icon}
+        </Tab>
+      );
+    }.bind(this);
+
+    let { style, children, tabBarStyle, tabBarShadowStyle, sceneStyle, ...props } = this.props;
     return (
-      <Navigator
-        initialRoute={this.props.firstRoute}
-        navigationBar={navigationBar}
-        renderScene={this.renderScene}
-        onDidFocus={this.onDidFocus}
-      />
+      <View style={styles.container}>
+        <Navigator
+          initialRoute={this.props.firstRoute}
+          navigationBar={navigationBar}
+          renderScene={this.renderScene}
+          onDidFocus={this.onDidFocus}
+        />
+        <TabBar style={tabBarStyle} shadowStyle={tabBarShadowStyle}>
+          {React.Children.map(children, _renderTab)}
+        </TabBar>
+      </View>
     )
-  }
+  };
 }
 
 var styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
-    marginTop: 64
   },
+  tabsContainer: {
+    backgroundColor: '#f8f8f8',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    height: Layout.tabBarHeight,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  shadow: {
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+    height: Layout.pixel,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: Platform.OS === 'android' ? 0 : -Layout.pixel,
+  },
+
 });
+
+Nav.Tabitem = Tabitem;

src/TabBar.js

@@ -0,0 +1,74 @@
+'use strict';
+
+import React from 'react-native';
+let {
+  StyleSheet,
+  Text,
+} = React;
+
+import Layout from './Layout';
+
+export default class Badge extends React.Component {
+  static propTypes = Text.propTypes;
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._handleLayout = this._handleLayout.bind(this);
+  }
+
+  state = {
+    computedSize: null,
+  };
+
+  render() {
+    let { computedSize } = this.state;
+    let style = {};
+    if (!computedSize) {
+      style.opacity = 0;
+    } else {
+      style.width = Math.max(computedSize.height, computedSize.width);
+    }
+
+    return (
+      <Text
+        {...this.props}
+        numberOfLines={1}
+        onLayout={this._handleLayout}
+        style={[styles.container, this.props.style, style]}>
+        {this.props.children}
+      </Text>
+    );
+  }
+
+  _handleLayout(event) {
+    let { width, height } = event.nativeEvent.layout;
+    let { computedSize } = this.state;
+    if (computedSize && computedSize.height === height &&
+      computedSize.width === width) {
+      return;
+    }
+
+    this.setState({
+      computedSize: { width, height },
+    });
+
+    if (this.props.onLayout) {
+      this.props.onLayout(event);
+    }
+  }
+}
+
+let styles = StyleSheet.create({
+  container: {
+    fontSize: 12,
+    color: '#fff',
+    backgroundColor: 'rgb(0, 122, 255)',
+    lineHeight: 15,
+    textAlign: 'center',
+    borderWidth: 1 + Layout.pixel,
+    borderColor: '#fefefe',
+    borderRadius: 17 / 2,
+    overflow: 'hidden',
+  },
+});

src/TabItem.js

@@ -3,12 +3,14 @@
 import React, {
   StyleSheet,
   View,
+  Text,
   Component,
 } from 'react-native';
 
 
 import NavBarContent  from './NavBarContent';
 
+
 export default class NavBarContainer extends Component {
 
   constructor (props) {
@@ -46,26 +48,27 @@ export default class NavBarContainer extends Component {
   // We render both the current and the previous navbar (for animation)
   render () {
     return (
-      <View style={[styles.navbarContainer]}>
-        <NavBarContent
-          route={this.state.previousRoute}
-          backButtonComponent={this.props.backButtonComponent}
-          rightCorner={this.props.rightCorner}
-          headerStyle={this.props.style}
-          titleStyle={this.props.titleStyle}
-          willDisappear="true"
-        />
-        <NavBarContent
-          route={this.props.currentRoute}
-          backButtonComponent={this.props.backButtonComponent}
-          rightCorner={this.props.rightCorner}
-          headerStyle={this.props.style}
-          titleStyle={this.props.titleStyle}
-          goBack={this.goBack}
-          goForward={this.goForward}
-          customAction={this.customAction}
-        />
-      </View>
+        <View style={[styles.navbarContainer]}>
+          <NavBarContent
+            route={this.state.previousRoute}
+            backButtonComponent={this.props.backButtonComponent}
+            rightCorner={this.props.rightCorner}
+            headerStyle={this.props.style}
+            titleStyle={this.props.titleStyle}
+            willDisappear="true"
+          />
+          <NavBarContent
+            route={this.props.currentRoute}
+            backButtonComponent={this.props.backButtonComponent}
+            rightCorner={this.props.rightCorner}
+            headerStyle={this.props.style}
+            titleStyle={this.props.titleStyle}
+            goBack={this.goBack}
+            goForward={this.goForward}
+            customAction={this.customAction}
+          />
+        </View>
+
     )
   }
 
@@ -74,6 +77,7 @@ export default class NavBarContainer extends Component {
 
 
 var styles = StyleSheet.create({
+
   navbarContainer: {
     position: 'absolute',
     top: 0,

src/badge.js

@@ -117,6 +117,7 @@ var NavBarContent = React.createClass({
       <View>
         {titleContent}
       </View>
+
     );
 
 
@@ -168,7 +169,8 @@ var styles = StyleSheet.create({
   },
   buttonTextRight: {
     marginRight: 10
-  }
+  },
+  
 });
 
 export default NavBarContent;