將StackNavigator與TabNavigator集成

Question

如何組合StackNavigator和TabNavigator？

我下面的代碼工作：

index.android.js：

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native'; 

import { StackNavigator,TabNavigator } from 'react-navigation'; 


import TestComp1 from './src/components/TestComp1' 
import TestComp2 from './src/components/TestComp2' 
import TestComp3 from './src/components/TestComp3' 
import TestComp4 from './src/components/TestComp4' 
import TestComp5 from './src/components/TestComp5' 

export default class myApp extends Component { 
    render() { 
    return (

     <MyApp /> 

    ); 
    } 
} 


const MyApp = StackNavigator({ 
    TestComp1: {screen:TestComp1}, 
    TestComp2: {screen:TestComp2} 
}); 

const Tabs = TabNavigator({ 
    TestComp3: {screen:TestComp3}, 
    TestComp4: {screen:TestComp4} 
    TestComp5: {screen:TestComp5} 
}); 

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

這僅適用於StackNavigator。我想保留現有的導航並集成TabNavigation。現在TestComp1如果我做到以下幾點：

TestComp1：

import { StackNavigator, TabNavigator } from 'react-navigation'; 

import { FooterTabs } from './routes/FooterTabs'; 

export default class HomePage extends Component { 

static navigationOptions = { 
    header: null 
    }; 

    render() { 
    return(
    <View style={styles.container}> 
     <View style={styles.mainContent}> 

     <Button 
       onPress={() => this.props.navigation.navigate('TestComp1', {name: 'Lucy'})} 
       title="NewPage" 
     /> 

     <FooterTabs /> //Page shows all StackNavigator screens if I add this 

     </View> 
     </View> 
    ) 
    } 

} 

而且FooterTabs：

import { StackNavigator, TabNavigator } from 'react-navigation'; 

import TestComp3 from '../TestComp3'; 
import TestComp4 from '../TestComp4'; 
import TestComp5 from '../TestComp5'; 



export const FooterTabs = TabNavigator({ 

    Tab1: { 
    screen: TestComp3 
    }, 
    Tab2: { 
    screen: TestComp4 
    }, 
    Tab3: { 
    screen: TestComp5 
    }, 

}) 

所示。FooterTabs但TestComp1和TestComp2下面也顯示一切另一個。我該如何解決？謝謝。

UPDATE 1：

更新2：

const Tabs = TabNavigator({ 
    TestComp3: {screen:TestComp1}, 
    TestComp4: { 
    screen:TestComp4, 
    navigationOptions: ({ navigation }) => ({ 
     title: "TestComp4", 
     tabBarIcon: ({ tintColor }) => <MaterialIcons name="accessibility" size={20}/> 
     }) 

    } 

UPDATE 3

我添加另一const爲DrawerNavigator並將其配置是這樣的：

const Drawer = DrawerNavigator({ 

    First:{ 
    screen: DrawerScreen1 
    }, 
    Second:{ 
    screen: DrawerScreen2 
    } 

},{ 
    initialRouteName:'First', 
    drawerPosition: 'left' 
}); 

並列入應用程序：

const MyApp = StackNavigator({ 
    TestComp1: {screen:TestComp1}, 
    TestComp2: {screen:TestComp2}, 
    Tabs: { 
    screen: Tabs 
    }, 
    Drawer: { 
    screen: Drawer 
    }, 
}, { 
    initialRouteName: "Tabs" 
}); 

我打電話吧：

<Button 
    onPress={() => this.props.navigation.navigate('DrawerOpen')} 
    title="Show Drawer" 
/> 

此按鈕DrawerScreen1的OnPress被稱爲而是作爲一個組成部分，它並不顯示爲左邊的抽屜。我錯過了什麼？

Answer 1

你可以試試這個：

const Tabs = TabNavigator({ 
    TestComp3: {screen:TestComp3}, 
    TestComp4: {screen:TestComp4} 
    TestComp5: {screen:TestComp5} 
}); 

onst MyApp = StackNavigator({ 
    TestComp1: {screen:TestComp1}, 
    TestComp2: {screen:TestComp2}, 
    Tabs: { 
    screen: Tabs 
    } 
}, { 
    initialRouteName: "Tabs" 
}); 

和TestComp1

Answer 2

刪除<FooterTabs />現在讓我們看看。您首先需要的是StackNavigator，然後在StackNavigator的其中一個屏幕內，您需要一個TabNavigator。對？

這個問題的答案會是以下幾點： 爲了您index.android.js：

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 


import TestComp1 from './src/components/TestComp1' 
import TestComp2 from './src/components/TestComp2' 

// Don't need to export default here since this is the root component 
// that is registered with AppRegistry and we don't need to import it anywhere. 

class myApp extends Component { 
    render() { 
    return (
     <MyApp /> 
    ); 
    } 
} 

// Notice that these two screens will consist the navigation stack. 
// Assume, TestComp1 contains our Tabbed layout. 

const MyApp = StackNavigator({ 
    TestComp1: { screen:TestComp1 }, // This screen will have tabs. 
    TestComp2: { screen:TestComp2 } 
}); 

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

現在讓我們來移動到您的TestComp1，這是有你的標籤的屏幕。

TestComp1：

// ... all imports here. 

// This should be your first tab. 

class Home extends Component { 

    static navigationOptions = { 
    // Label for your tab. Can also place a tab icon here. 
    tabBarLabel: 'Home', 
    }; 

    render() { 
    return(
    <View style={styles.container}> 
     <View style={styles.mainContent}> 
     // This will change your tab to 'Profile'. 
     <Button 
       onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})} 
       title="NewPage" 
     /> 
     </View> 
     </View> 
    ) 
    } 
} 

// This can be your second tab and so on. 

class Profile extends Component { 

    static navigationOptions = { 
    // Label for your tab. 
    tabBarLabel: 'Profile', 
    }; 

    render() { 
     return (
     <Text>This is the profile Tab.<Text> 
     ); 
    } 
} 

export default TabNavigator({ 
    Home: { 
     screen: Home, 
    }, 
    Profile: { 
    screen: Profile, 
    }, 
}, { 

    // This will get the tabs to show their labels/icons at the bottom. 
    tabBarPosition: 'bottom', 

    animationEnabled: true, 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
}); 

所以基本上，你的TestComp1有兩個組成部分（Home和Profile）裏面哪些是TabNavigator兩個部分，因此他們將作爲標籤。 （您不需要擔心單獨的頁腳組件，因爲ReactNavigation會自動使用您的組件的navigationOptions）我們將導出此TabNavigator實例，我們將使用該實例作爲導入到index.android.js，我們會將此導入放置在我們的StackNavigator作爲應用程序的屏幕。

通過這種方式，您已將Tabs以及StackNavigator納入您的RN應用程序中。此外，tabBarPosition: 'bottom'將您的標籤放在底部。 您也不再需要維護一個單獨的FooterTabs組件，如您所見。

如果您需要更清晰或微調，請閱讀docs。

希望我幫了忙。 :)