詳解React Native頂|底部導航使用小技巧

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Button,
 Text,
 View,
 Image,
 StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";


class Home extends React.Component {
 static navigationOptions = {
 tabBarLabel: '熱點',
 tabBarIcon: ({ focused, tintColor }) => (
 <Image
 source={focused ? require('../res/images/hot_hover.png') : require('../res/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('../res/images/coterie.png') : require('../res/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('../res/images/tool.png') : require('../res/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('../res/images/my_hover.png') : require('../res/images/my.png')}
 style={{ width: 26, height: 26, tintColor: tintColor }}
 />
 )
 };
 render() {
 return (
 <View style={styles.container}>
 <Text>！這是我的</Text>
 </View>
 );
 }
}

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


const MyApp = 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',
 });

module.exports = MyApp;