stackNavigator和bottomTabNavigator导航标头和行为

Question

点击主屏幕上的按钮会导致导航标题颜色和后退按钮具有所需的行为，但是选项卡栏消失。轻触标签栏上的按钮可进行所需的导航，但是标题颜色和后退按钮不会出现。

本机反应新手。我已经为此工作了好几天。下面粘贴了App.js。

import React from 'react';
    import {Button, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

const styles = StyleSheet.create({
    HamburgerIconStyle: {
        margin: 20,
        height: 30,
        width: 30
    },
});

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
        headerStyle: {backgroundColor: 'green'},
        headerTitleStyle: {color: 'white'},
    };

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Ready"
                    onPress={() => {
                        this.props.navigation.push('Details', {
                            itemId: 86,
                            otherParam: 'anything you want here',
                        });
                    }}
                />

                <Button
                    title="Go to Emergency"
                    onPress={() => {
                        this.props.navigation.push('Emergency');
                    }}
                />

                <Button
                    title="Go to Recovery"
                    onPress={() => {
                        this.props.navigation.push('Recovery');
                    }}
                />

                <Button
                    title="Go to Social"
                    onPress={() => {
                        this.props.navigation.push('Social');
                    }}
                />
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    static navigationOptions = {
        title: 'Ready',
        headerStyle: {backgroundColor: 'green'},
        headerTitleStyle: {color: 'white'},
    };

    render() {
        const {navigation} = this.props;
        const itemId = navigation.getParam('itemId', 'NO-ID');
        const otherParam = navigation.getParam('otherParam', 'some default value');

        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Details Screen</Text>
                <Text>itemId: {JSON.stringify(itemId)}</Text>
                <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                <Button
                    title="Go to Ready... again"
                    onPress={() =>
                        this.props.navigation.push('Details', {
                            itemId: Math.floor(Math.random() * 100),
                        })}
                />
                <Button
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

class MoreScreen extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>More Screen!</Text>
            </View>
        );
    }
}

class EmergencyScreen extends React.Component {
    static navigationOptions = {
        title: 'Emergency',
        headerStyle: {backgroundColor: 'red'},
        headerTitleStyle: {color: 'white'},
    };

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Emergency Screen!</Text>
            </View>
        );
    }
}

class RecoveryScreen extends React.Component {
    static navigationOptions = {
        title: 'Recovery',
        headerStyle: {backgroundColor: 'blue'},
        headerTitleStyle: {color: 'white'},
    };

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Recovery Screen!</Text>
            </View>
        );
    }
}

class SocialScreen extends React.Component {
    static navigationOptions = {
        title: 'Social',
        headerStyle: {backgroundColor: 'red'},
        headerTitleStyle: {color: 'white'},
    };

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Social Screen!</Text>
            </View>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
        Home: {
            screen: HomeScreen,
            navigationOptions: {
                tabBarLabel: 'Home',
                tabBarIcon: ({focused}) => {
                    const image = focused
                        ? require('./src/images/home_enabled.png')
                        : require('./src/images/home_unselected.png');
                    return (
                        <Image
                            source={image}
                            style={{height: 24, width: 24}}
                        />
                    )
                }
            }
        },
        Details: {
            screen: DetailsScreen,
            navigationOptions: {
                tabBarLabel: 'Ready',
                tabBarIcon: ({focused}) => {
                    const image = focused
                        ? require('./src/images/ready_enabled.png')
                        : require('./src/images/ready_unselected.png');
                    return (
                        <Image
                            source={image}
                            style={{height: 24, width: 24}}
                        />
                    )
                },
                headerStyle: {
                    backgroundColor: 'green',
                },
            }
        },
        Emergency: {
            screen: EmergencyScreen,
            navigationOptions: {
                tabBarLabel: 'Emergency',
                tabBarIcon: ({focused}) => {
                    const image = focused
                        ? require('./src/images/emergency_enabled.png')
                        : require('./src/images/emergency_unselected.png');
                    return (
                        <Image
                            source={image}
                            style={{height: 24, width: 24}}
                        />
                    )
                }
            }
        },
        Recovery: {
            screen: RecoveryScreen,
            navigationOptions: {
                tabBarLabel: 'Recovery',
                tabBarIcon: ({focused}) => {
                    const image = focused
                        ? require('./src/images/recover_enabled.png')
                        : require('./src/images/recover_unselected.png');
                    return (
                        <Image
                            source={image}
                            style={{height: 24, width: 24}}
                        />
                    )
                }
            }
        },
        Social: {
            screen: SocialScreen,
            navigationOptions: {
                tabBarLabel: 'Social',
                tabBarIcon: ({focused}) => {
                    const image = focused
                        ? require('./src/images/social-icon-enabled.png')
                        : require('./src/images/social-icon-disabled.png');
                    return (
                        <Image
                            source={image}
                            style={{height: 24, width: 24}}
                        />
                    )
                }
            }
        }
    },
    {
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        tabBarOptions: {
            activeTintColor: '#007AFF',
            inactiveTintColor: 'gray',
            style: {
                backgroundColor: 'black',
            },
            labelStyle: {
                fontSize: 14
            }
        },
    }
);

const RootStack = createStackNavigator(
    {
        Home: TabNavigator,
        Details: {
            screen: DetailsScreen,
        },
        Emergency: {
            screen: EmergencyScreen,
        },
        Recovery: {
            screen: RecoveryScreen,
        },
        Social: {
            screen: SocialScreen,
        },

        More: MoreScreen,
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: ({navigation}) => ({
            headerStyle: {
                backgroundColor: 'rgba(76, 76, 76,1)',
            },
            headerTitle: 'Home',
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerRight: <TouchableOpacity activeOpacity={0.5} onPress={() => navigation.navigate('More')}>
                <Image source={require('./src/images/more-icon.png')} style={styles.HamburgerIconStyle}/>
            </TouchableOpacity>,
        }),
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer/>;
    }
}