导航栏和标签栏未同时显示

Question

The following code will show the navigation bar and it's navigation works as it should...But the tab bar does not show up at all. Now, if I remove the code that has to do with the navBar, the tab bar is present.

I am a bit new to React-Native, so I bet I am missing something, but I feel I did everything correctly as the tutorial I was following said to do.

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
    WebView
} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome'
    };
    render() {
        const {navigate} = this.props.navigation;
        return(
            <View>
                <Text>Hello!</Text>
                <Button
                    onPress={() => navigate('Chat')}
                    title="Navigate to new screen"
                />
            </View>
        );
    }
}

class NewScreen extends React.Component {
    static navigationOptions = {
        title: 'New screen'
    };
    render() {
        return (
            <View>
                <Text>Welcome to your new screen</Text>
            </View>
        );
    }
}

class WebScreen extends React.Component {
    render() {
        return <Text>Recents</Text>
    }
}

class OtherTabScreen extends React.Component {
    render() {
        return <Text>Alternate screen</Text>
    }
}

const TabBarNavigator = TabNavigator({
    Web: {screen: WebScreen},
    Other: {screen: OtherTabScreen}
});

const GivingTrax = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: {screen: NewScreen}
});

AppRegistry.registerComponent('GivingTrax', () => GivingTrax);

Answer 1

You need to combine Navigators if you like to have TabNavigator inside a StackNavigator or vise versa. Check docs for Nesting Navigators for more info.

Example:

const TabBarNavigator = TabNavigator({
    Home: {screen: HomeScreen},
    Web: {screen: WebScreen},
    Other: {screen: OtherTabScreen}
});

const GivingTrax = StackNavigator({
    Tabbed: {screen: TabBarNavigator},
    Chat: {screen: NewScreen}
});

OR

const TabBarNavigator = TabNavigator({
    Home: {screen: GivingTrax},
    Web: {screen: WebScreen},
    Other: {screen: OtherTabScreen}
});

const GivingTrax = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: {screen: NewScreen}
});