将 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 如果我执行以下操作：

测试组件 1 :

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

}

和 页脚标签：

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

按下此按钮时会调用 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"
});

并从 TestComp1

中删除 <FooterTabs />

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 我们将把这个导入放在我们的 StackNavigator 中作为应用程序的屏幕。

通过这种方式，您已将 Tabs 和 StackNavigator 合并到您的 RN 应用程序中。此外，tabBarPosition: 'bottom' 将您的选项卡放在底部。如您所见，您也不再维护单独的 FooterTabs 组件。

如果您需要更清晰的内容或进行微调，请阅读 docs。

希望对您有所帮助。 :)

将 StackNavigator 与 TabNavigator 集成

Integrate StackNavigator with TabNavigator

reactjs

react-native

react-navigation