将 StackNavigator 与 TabNavigator 集成

IT技术 reactjs react-native react-navigation
2021-05-18 11:01:12

如何结合 StackNavigator 和 TabNavigator？

我的以下代码有效：

索引.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

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

这个按钮的 OnPressDrawerScreen1被调用，但作为一个组件，它不显示为左侧的抽屉。我错过了什么？

2个回答

你可以试试这个：

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

让我们现在看看。您首先需要的是一个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，这是包含您的选项卡的屏幕。

测试组合1：

// ... 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组件，如您所见。

如果您需要更清晰或微调，请阅读文档。

希望我有所帮助。:)

其它你可能感兴趣的问题
上一篇为什么 Leaflet 在 React 中平移和缩放的速度如此之慢？ 下一篇React 从 json 数据迭代对象