React Native(四)——頂部以及底部導航欄實現方式

效果圖：

一步一步慢慢來：

其實剛入手做app的時候，就應該做出簡單的頂部以及底部導航欄。無奈又在忙其他事情，導致這些現在才整理出來。

1.頂部導航欄：react-native-scrollable-tab-view；文檔地址：https://github.com/skv-headless/react-native-scrollable-tab-view

2.底部導航欄：react-navigation中的TabNavigator；文檔地址：https://reactnavigation.org/docs/navigators/tab

---

3.一直想讓index.android.js的代碼簡潔一些，苦思不得其解，直到現在才找到了一點“路徑”，看這版的源代碼：

index.android.js：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

//頂部導航欄
import TopTabBar from './Views/TopTabBar';
//底部導航欄
import BottomTabBar from './Views/BottomTabBar';


export default class ywg extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <TopTabBar/>
        <BottomTabBar/>
      </View>    
    );
  }
}

AppRegistry.registerComponent('ywg', () => ywg);

怎樣？夠簡單吧……對了，這樣的代碼看起來才比較“優雅”（容忍zheng小葉正兒八經的胡說八道哦~）而主要的代碼就在

//頂部導航欄
import TopTabBar from './Views/TopTabBar';
//底部導航欄
import BottomTabBar from './Views/BottomTabBar';

這兩個紅色的文件中。

【重點注意】將兩個Component同時使用的時候，一定要在最外層的View上定義樣式，否則任你怎樣擺弄，它們總是不會展現“廬山真面目”，具體的文檔在：http://reactnative.cn/docs/0.46/layout-props.html

這是項目文件路徑。

BottomTabBar.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

//底部導航欄
import { TabNavigator } from "react-navigation";

class Home extends React.Component {
  static navigationOptions = {
      tabBarLabel: '熱點',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/hot_hover.png') : require('../Images/hot.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>這是熱點</Text>
          </View>
      );
  }
}   class Circle extends React.Component {
  static navigationOptions = {
      tabBarLabel: '圈子',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/coterie_hover.png') : require('../Images/coterie.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>這是圈子內容</Text>
          </View>
      );
  }
}   class Tools extends React.Component {
  static navigationOptions = {
      tabBarLabel: '工具',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/tool.png') : require('../Images/tool.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>這是工具內容</Text>
          </View>
      );
  }
}
class Mypage extends React.Component {
    static navigationOptions = {
      tabBarLabel: '我的',
      tabBarIcon: ({ focused, tintColor }) => (
        <Image
          source={focused ? require('../Images/my_hover.png') : require('../Images/my.png')}
          style={{ width: 26, height: 26, tintColor: tintColor }}
        />
      )
    };
    render() {
      return (
        <View style={styles.container}>
          <Text>這是我的內容</Text>
        </View>
      );
    }
}

const BottomTabBar = TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Circle: {
      screen: Circle,
    },
    Tools: {
      screen: Tools,
    },
    Mypage: {
      screen: Mypage,
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#4BC1D2',
      inactiveTintColor: '#000',
      showIcon: true,
      showLabel: true,
      upperCaseLabel: false,
      pressColor: '#823453',
      pressOpacity: 0.8,
      style: {
        backgroundColor: '#fff',
        paddingBottom: 0,
        borderTopWidth: 0.5,
        borderTopColor: '#ccc',
      },
      labelStyle: {
        fontSize: 12,
        margin: 1
      },
      indicatorStyle: { height: 0 }, //android 中TabBar下面會顯示一條線，高度設為 0 后就不顯示線了
    },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
  });

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  }
});

module.exports = BottomTabBar;

TopTabBar.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import HomePage from '../Views/HomePage';
import PricePage from '../Views/PricePage';
import InventoryPage from '../Views/InventoryPage';

//頂部導航
var ScrollableTabView = require('react-native-scrollable-tab-view');


export default class TopTabBar extends Component {
  render() {
    return (
      <ScrollableTabView 
       tabBarUnderlineStyle={{backgroundColor:'#fff'}}
      >
        <HomePage tabLabel="首頁" />
        <PricePage tabLabel="成交價" />
        <InventoryPage tabLabel="庫存" />
      </ScrollableTabView>
    );
  }
}
module.exports = TopTabBar;

而關於這些的詳細介紹可以參考這里（老大的小結）：http://www.cnblogs.com/vipstone/p/7516115.html?utm_source=tuicool&utm_medium=referral；

美中不足：

怎樣才能實現頂部欄、底部欄控制各自部分功能呢？留下來的~~~

---

PS:尷尬的事情猝不及防的發生了……

一直想不明白，頂部導航欄跟底部導航欄同時存在的情況下，怎樣控制各自的功能呢？於是再請教完做手機開發的同事后才恍然大悟，原來自己想的頂部導航欄根本不是頂部導航欄，簡言之就是自己把布局搞錯了！明明只是有底部導航欄，而所謂的“頂部導航欄”也只是底部導航欄中的第一小部分里面嵌套着一個輪播組件，才會給人以錯覺，啊啊啊……事實真相居然是這樣的~