返回按钮改为箭头、标题居中

Author: banyingli

MainPage.js

@@ -12,6 +12,7 @@ import {
 import TabNavigator from 'react-native-tab-navigator';
 import TabPage1 from './TabPage1.js'
 import TabPage2 from './TabPage2.js'
+import TabPage3 from './TabPage3.js'
 
 class MainPage extends Component {
     constructor(props) {
@@ -49,6 +50,15 @@ class MainPage extends Component {
                       onPress={() => this.setState({ selectedTab: 'tab2' })}>
                       <TabPage2  routerCallback={this.jumpPage} />
                   </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' })}>
+                      <TabPage3  routerCallback={this.jumpPage} />
+                  </TabNavigator.Item>
               </TabNavigator>
           </View>
         );

TabPage3.js

@@ -0,0 +1,48 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * @flow
+ */
+// 'use strict';
+import React, { Component } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet
+} from 'react-native';
+
+import SecondPage from './SecondPage.js'
+
+class TestPage3 extends Component {
+    constructor(props) {
+        super(props);
+        this.toRoute = this.toRoute.bind(this);
+    }
+
+    toRoute(){
+        var r = {name: 'From TabPage3',
+            component: SecondPage};
+        this.props.routerCallback('toRoute',r);
+    }
+
+    render() {
+        return (
+            <View style={{flex: 1}}>
+
+                <Text style={styles.textStyle}  onPress={this.toRoute}> Tab  页面 3</Text>
+
+            </View>
+        );
+    }
+};
+
+var styles = StyleSheet.create({
+    textStyle:{
+        backgroundColor:'#eee',
+        color:'#000',
+        fontSize:30,
+        marginTop:30,
+    },
+});
+
+export default TestPage3;

components/icons/NavBackButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet, Image } from 'react-native';
+
+export default class NavBackButton extends React.Component {
+  render() {
+    return (
+      <Image source={require('../../res/icon_nav_back.png')} style={styles.backButton} />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  backButton: {
+    width: 10,
+    height: 17,
+    marginLeft: 10,
+    marginTop: 3,
+    marginRight: 10,
+    },
+});

index.android.js

@@ -6,6 +6,7 @@ import {
 
 import Router from 'react-native-simple-router';
 import MainPage from './MainPage';
+import NavBackButton from './components/icons/NavBackButton.js'
 
 // 声明第一个页面
 const firstRoute = {
@@ -19,18 +20,25 @@ class ReactNativeCodeSnippet extends Component {
             <Router
                 firstRoute={firstRoute}
                 handleBackAndroid
-                headerStyle={styles.header}
+                headerStyle={styles.navHeader}
+                titleStyle={styles.navTitle} // 标题的样式
+                backButtonComponent={NavBackButton} // 返回按钮使用箭头
                 ref={'router'}
                 />
         );
     }
 }
 
 const styles = StyleSheet.create({
-    header: {
+    navHeader: {
         backgroundColor: '#fcaf17',
     },
+    navTitle: {
+        textAlign: 'center',
+    }
 });
 
 // 一定要注意引号中的'ReactNativeCodeSnippet'必须与MainActivity中getMainComponentName()的返回值一致，否则会报错
 AppRegistry.registerComponent('ReactNativeCodeSnippet', () => ReactNativeCodeSnippet);
+
+