StackNavigator 中的 TabsNavigator [英] TabsNavigator inside StackNavigator

问题描述

我正在使用 React-Navigation 并且我有一个 StackNavigator，这是带有 Stack + Tabs Navigator 的 app.js:

I'm using React-Navigation and I have a StackNavigator, this is the app.js with the Stack + Tabs Navigator:

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       title: "Home",
     }),
  },
});

const TabsNav = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({navigation})=>({
      title: "Home",
    }),
  },
  Friends: {
    screen: FriendsScreen,
    navigationOptions: ({navigation})=>({
      title: "My Friends",
    }),
  },
});
export default Stylelist;

我想在 HomeScreen 中有 2 个标签，一个是 Home 本身，另一个是 FriendsScreen，我该怎么做?我尝试在 reactnavigation.org 中查找，但不知道该怎么做.

I want to have 2 tabs inside HomeScreen, one is Home itself and the other is FriendsScreen, How can I do that? I tried looking in reactnavigation.org but couldn't understand how to do it.

提前致谢！

推荐答案

您可以使用 TabNavigator 作为 StackNavigator 的屏幕以便嵌套.

You can use TabNavigator as screen for StackNavigator in order to nest.

const Stylelist = StackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  Register: {
    screen: RegisterScreen,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  Home: {
    screen: TabNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({
          title: 'Home',
        }),
      },
      Friends: {
        screen: FriendsScreen,
        navigationOptions: ({ navigation }) => ({
          title: 'My Friends',
        }),
      },
    }),
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
    }),
  },
});

export default Stylelist;

这篇关于StackNavigator 中的 TabsNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！