導航欄和標籤欄不能一起顯示

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