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

}

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

按下此按钮时调用 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