导航栏和标签栏没有一起出现

Question

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

我对 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

如果您想将 TabNavigator 放在 StackNavigator 中，则需要合并 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}
});