反应本地嵌套导航问题

Question

我尝试进行嵌套导航，我想添加导航自定义按钮 到stacknavigator中，使用headerRight和headerLeft属性从tabNavigator调用它们，但这对我不起作用，能帮我吗？这是我的导航：

import { StackNavigator } from 'react-navigation';

import Login from '../components/Login';
import Signup from '../components/Signup';
import AddPost from '../components/AddPost';

import Colors from '../constants/Colors';

import Tabs from './Tabs';


const Navigator = StackNavigator({
    Login: {
        screen: Login,
        navigationOptions: {
            title: 'Login',
            headerLeft: null
        }
    },
    Signup: {
        screen: Signup,
        navigationOptions: {
            title: 'Signup'
        }
    },
    Main: {
        screen: Tabs
    },
    Add: {
        screen: AddPost,
        navigationOptions: {
            title: 'Share Image'
        }
    }

}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: Colors.redColor
        },
        headerTintColor: Colors.white,
        headerTitleStyle: {
            color: Colors.white,
            fontSize: 20
        }
    }
});

export default Navigator;

这是我遇到问题的Tabs.js的代码，您在这里看到它仅显示FAIcon和MIcon，headerLeft和headerRight，它们什么都不显示：

import React from 'react';
import { TabNavigator } from 'react-navigation';

import FAIcon from 'react-native-vector-icons/FontAwesome';
import MIcon from 'react-native-vector-icons/MaterialIcons';

import Home from '../components/Home';
import Profile from '../components/Profile';

import Colors from '../constants/Colors';

import { AddButton, LogoutButton } from './HeaderButtons';

const Tabs = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: ({ navigation }) => ({
            title: 'Home',
            headerRight: <AddButton navigation={navigation} />,
            headerLeft: <LogoutButton navigation={navigation}/>,
            tabBarIcon: ({ tintColor }) => {
                return (
                    <FAIcon 
                        name='home'
                        size={25}
                        color={tintColor}
                    />
                );
            }
        })
    },
    Profile: {
        screen: Profile,
        navigationOptions: ({ navigation }) => ({
            title: 'Profile',
            headerLeft: <LogoutButton navigation={navigation} />,
            tabBarIcon: ({ tintColor }) => {
                return (
                    <MIcon
                        name='account-circle'
                        size={25}
                        color={tintColor}
                    />
                );
            }
        })
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        showIcon: true,
        showLabel: true,
        inactiveTintColor: Colors.blue,
        activeTintColor: Colors.redColor,
        pressColor: Colors.redColor,
        indicatorStyle: { backgroundColor: Colors.redColor },
        style: {
            backgroundColor: Colors.white
        }
    }
});

export default Tabs;

这是未显示的两个组件的代码：

import React from 'react';
import { TouchableOpacity } from 'react-native';

import FAIcon from 'react-native-vector-icons/FontAwesome';
import MIcon from 'react-native-vector-icons/MaterialIcons';

import Colors from '../constants/Colors';
import firebase from '../firebase';

export const AddButton = ({ navigation }) => {
    return (
        <TouchableOpacity 
            style={{ marginRight: 10 }}
            onPress={() => navigation.navigate('Add')}
        >
            <MIcon 
                name='add-circle'
                size={30}
                color={Colors.blue}
            />
        </TouchableOpacity>
    );
};

export const LogoutButton = ({ navigation }) => {
    return (
        <TouchableOpacity 
            onPress={() => logout(navigation)}
            style={{ marginLeft: 10 }}
        >
            <FAIcon
                name='sign-out'
                size={30}
                color={Colors.blue}
            />
        </TouchableOpacity>
    );
};

const logout = (navigation) => {
    firebase.auth().signOut();
    navigation.navigate('Login');
};