代码之家 › 专栏 › 技术社区 › Somename

将StackNavigator与TabNavigator集成

react-navigation react-native reactjs

2

Somename · 技术社区 · 9 年前

如何组合StackNavigator和TabNavigator?

我的以下代码有效:

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

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 显示,但 测试组件1 和 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"
/>

按下此按钮后 DrawerScreen1 被调用,但作为一个组件,它不会从左侧显示为抽屉。我错过了什么?

2 回复 | 直到 9 年前

1

10

Harkirat Saluja 8 年前

你可以试试这个:

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

2

0

Mustansir Zia 9 年前

现在让我们看看。你需要的是第一个 StackNavigator 然后在 堆栈导航器 你需要一个 TabNavigator

答案如下: 指数安卓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',
  },
});

所以从本质上来说 测试组件1 有两个组件( Home Profile )它的内部都是 选项卡导航器 因此,它们将充当选项卡。(您不需要担心一个单独的页脚组件,因为它可以自动使用您组件的 navigationOptions 选项卡导航器 我们将用作导入的实例 index.android.js 堆栈导航器 作为应用程序的屏幕。

这样你就合并了 Tabs 以及 堆栈导航器 在您的RN应用程序中。而且 tabBarPosition: 'bottom' 将标签放在底部。 FooterTabs 正如你们所看到的。

阅读 docs 如果您需要更清晰或微调。

希望我能帮上忙。:)