将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也显示在彼此之下。我该如何解决？感谢。

更新1：

更新2：

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

  }

更新3

我为DrawerNavigator添加了另一个const并将其配置为：

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"
/>

此按钮的OnPress调用DrawerScreen1但作为组件，它不会显示为左侧的抽屉。我错过了什么？

Answer 1

你可以试试这个：

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

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

并从<FooterTabs />

中删除TestComp1

Answer 2

现在让我们看看。您需要的是首先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 1}}我们将此导入内容放在我们的StackNavigator内作为应用的屏幕。

这样您就可以在RN应用中加入Tabs和StackNavigator。此外，tabBarPosition: 'bottom'会将标签放在底部。 您也不再需要维护单独的FooterTabs组件。

如果您需要更多清晰度或微调，请阅读docs。

希望我帮助过。 ：）