如何使用CreateStackNavigator将CreateBottomTabnavigator添加到同一屏幕

Question

在我的主屏幕上（我使用app.js作为家中），我的createStackNavigator带有createAppContainer，可以使用React-Navigation映射所有屏幕。它有效，我可以从任何屏幕上明确导航到这些屏幕中的任何一个。现在，我想用" CreateBottomTabnavigator"将底部标签导航栏添加到主屏幕。

这是我的代码的简化版本：

import { createStackNavigator, createAppContainer, createBottomTabNavigator  } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
class HomeScreen extends React.Component {
   render() {
      return (
         <View><Text>Welcome</Text></View>
      );
   }
 }
 const AppNavigator = createStackNavigator({
   Home: { screen: HomeScreen },
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 },
   Screen3: { screen: Screen3 },
 });
 export default createAppContainer(AppNavigator);

我想在这样的底部添加一个导航栏：

const TabNavigator = createBottomTabNavigator({
   Home: { screen: HomeScreen },
   Screen3: { screen: Screen3 },
});
export default createAppContainer(TabNavigator);

它不允许在同一页面中两个"导出默认值"。如何在保留" CreateStackNavigator"映射我的所有屏幕时添加" CreateBottomTabnavigator"？

Answer 1

您可以使用以下代码：

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
class HomeScreen extends React.Component {
  render() {
    return (
       <View><Text>Welcome</Text></View>
    );
 } 
}
const AppNavigator = createStackNavigator({
  Home: { screen: TabNavigator },
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
});
const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Screen3: { screen: Screen3 },
});
export default createAppContainer(AppNavigator);

Answer 2

类似的东西。

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
import Screen4 from './Screens/Screen4';
const Home = createStackNavigator({
  Screen1, Screen2
});
const List = createStackNavigator({
  Screen3, Screen4
});
const TabNav = createBottomTabNavigator({
  Home, List
});
export default createAppContainer(TabNav);

这里您的房屋可以是Screen1，Screen2可以是Screen1的项目，而Screen3 and Screen4