导航栏和标签栏不能一起显示

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

你需要的，如果你想有一个TabNavigator的内部StackNavigator或反之亦然结合导航仪。有关更多信息，请参阅Nesting Navigators的文档。

例子：

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} 
});