kangaroo/js/page/MyGift.js

import React, { Component } from "react"
import { StyleSheet } from "react-native"
import { unitWidth } from "../utils/AdapterUtil";
import { createMaterialTopTabNavigator } from "react-navigation-tabs"
import { createAppContainer } from 'react-navigation';
import GetGift from './GetGift'
import SendGift from './SendGift'

export default class MyGift extends Component {
    _tabNavigator() {
        return createAppContainer(
            createMaterialTopTabNavigator(
                {//在这里配置页面的路由
                    GetGift: {
                        screen: GetGift,
                        navigationOptions: {
                            tabBarLabel: '收到的礼物'
                        }
                    },
                    SendGift: {
                        screen: SendGift,
                        navigationOptions: {
                            tabBarLabel: '送出的礼物'
                        }
                    },
                },
                {
                    tabBarOptions: {
                        activeTintColor: 'white',//label和icon的前景色 活跃状态下（选中）
                        inactiveTintColor: '#FFD1D1',//label和icon的前景色 活跃状态下（未选中）
                        style: {
                            backgroundColor: '#FB788A',//TabBar 的背景颜色
                        },
                        indicatorStyle: {
                            height: 2,
                            backgroundColor: '#fff',
                        },//标签指示器的样式
                        labelStyle: {
                            fontSize: unitWidth * 28,
                            // marginTop: unitHeight * 37,
                            // marginBottom: unitHeight * 31,
                        },//文字的样式
                    },
                }
            )
        )
    }
    render() {
        const Tab = this._tabNavigator()
        return <Tab />
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
})