TabsNavigator內StackNavigator

Question

我使用的陣營，導航和我有一個StackNavigator，這是與堆棧+標籤導航的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; 

我想有內部的主屏幕2個標籤，一個是主頁本身，另一個是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;