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;

StackNavigator 中的 TabsNavigator

TabsNavigator inside StackNavigator

react-native

react-navigation