заголовок и поведение навигации 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/>;
    }
}