导航栏和标签栏没有一起显示

Question

以下代码将显示导航栏，它的导航工作正常......但标签栏根本没有显示。现在，如果我删除与navBar有关的代码，则会出现标签栏。

我对React-Native有点新意，所以我打赌我错过了一些东西，但我觉得我按照我所说的教程做了一切。

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

如果您想在StackNavigator中使用TabNavigator，则需要组合Navigators，反之亦然。查看Nesting Navigators的文档以获取更多信息。

示例：

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

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

或

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

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