StackNavigator中的TabsNavigator

Question

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

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但是不知道该怎么做。

提前致谢！

Answer 1

您可以使用TabNavigator作为StackNavigator的屏幕来嵌套。

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;