切换tab的同时，修改导航栏上的title

refs：react-native-simple-router-community/react-native-simple-router#133

Author: banyingli

MainPage.js

@@ -18,17 +18,28 @@ class MainPage extends Component {
     constructor(props) {
          super(props);
          this.state = {
-              selectedTab:'tab1' // 默认显示tab1标签
+              selectedTab:'tab1', // 默认显示tab1标签
           };
 
          this.jumpPage = this.jumpPage.bind(this);
+         this.changeTab = this.changeTab.bind(this);
+    }
+
+    componentDidMount() {
+        this.changeTab('tab1','TabPage1');
     }
 
     // 页面跳转('方法','页面信息')
     jumpPage(method, routerData){
         this.props[method](routerData);
     }
 
+    // 切换Tab页（当前tab名,切换到当前tab时导航栏上的title)
+    changeTab(currentTab, titleText){
+        this.setState({ selectedTab: currentTab });
+        this.props.setTitleProps({name: titleText});
+    }
+
     render() {
         return (
           <View style={{flex: 1}}>
@@ -38,25 +49,25 @@ class MainPage extends Component {
                       title="Tab1"
                       renderIcon={() => <Image source={require('./res/icon_bottomtag_market_n.png')} style={styles.tabImage} />}
                       renderSelectedIcon={() => <Image source={require('./res/icon_bottomtag_market_s.png')}  style={styles.tabImage} />}
-                      onPress={() => this.setState({ selectedTab: 'tab1' })}>
-                      <TabPage1  routerCallback={this.jumpPage} />
+                      onPress={() => this.changeTab('tab1','TabPage1')}>
+                      <TabPage1  routerCallback={this.jumpPage} changeNavTitle={this.changeTitle} />
                   </TabNavigator.Item>
 
                   <TabNavigator.Item
                       selected={this.state.selectedTab === 'tab2'}
                       title="Tab2"
                       renderIcon={() => <Image source={require('./res/icon_bottomtag_home_n.png')}  style={styles.tabImage} />}
                       renderSelectedIcon={() => <Image source={require('./res/icon_bottomtag_home_s.png')}  style={styles.tabImage} />}
-                      onPress={() => this.setState({ selectedTab: 'tab2' })}>
-                      <TabPage2  routerCallback={this.jumpPage} />
+                      onPress={() => this.changeTab('tab2','TabPage2')}>
+                      <TabPage2  routerCallback={this.jumpPage} changeNavTitle={this.changeTitle} />
                   </TabNavigator.Item>
 
                   <TabNavigator.Item
                       selected={this.state.selectedTab === 'tab3'}
                       title="Tab3"
                       renderIcon={() => <Image source={require('./res/icon_bottomtag_home_n.png')}  style={styles.tabImage} />}
                       renderSelectedIcon={() => <Image source={require('./res/icon_bottomtag_home_s.png')}  style={styles.tabImage} />}
-                      onPress={() => this.setState({ selectedTab: 'tab3' })}>
+                      onPress={() => this.changeTab('tab3','TabPage3')}>
                       <TabPage3  routerCallback={this.jumpPage} />
                   </TabNavigator.Item>
               </TabNavigator>

components/NavTitle.js

@@ -0,0 +1,33 @@
+/**
+ * Created by Administrator on 2016/9/19.
+ */
+import React, {Component} from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+} from 'react-native';
+
+export default class NavTitle extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (<View><Text style={styles.navbarText}>{this.props.name}</Text></View>);
+    }
+}
+
+const styles = StyleSheet.create({
+    navbarText: {
+        color: 'white',
+        fontSize: 17,
+        margin: 10,
+        marginTop: 0,
+        marginBottom: 0,
+        fontWeight: '600',
+        textAlign: 'center',
+        alignItems: 'center',
+    },
+});

index.android.js

@@ -6,12 +6,14 @@ import {
 
 import Router from 'react-native-simple-router';
 import MainPage from './MainPage';
-import NavBackButton from './components/icons/NavBackButton.js'
+import NavBackButton from './components/icons/NavBackButton.js';
+import NavTitle from './components/NavTitle.js';
 
 // 声明第一个页面
 const firstRoute = {
     name: 'RNCodeSnippet',
     component: MainPage,
+    titleComponent: NavTitle
 };
 
 class ReactNativeCodeSnippet extends Component {