如何将底部标签栏嵌套在堆栈导航器中？

Question

我正在尝试在我的堆栈导航器中嵌套一个选项卡导航器，但是我不确定如何解决此问题，所以我问你。我已经读了一点，但仍然没有找到解决此问题的正确方法。

这里是一些代码：

import { createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const RootStack = createStackNavigator(
  {
    Home: LoginForm,
    Feed: NewsDetail,
    Unique: NewsUniquePage
  },
  {initialRouteName: 'Feed',
   defaultNavigationOptions: {
    headerStyle:{
      backgroundColor: 'white',
    },
    headerTintColor: 'black',
    headerTitleStyle:{
      textAlign: 'center',
      flex: 1
    }
  }},
);

const AppContainer = createAppContainer(RootStack)

我有更多代码，尽管这是与导航相关的唯一代码块。

我希望能够使用底部标签导航器在我的应用程序中导航。

Answer 1

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer, createStackNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class SplashScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Splash!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppNavigator = createStackNavigator({
  Splash : SplashScreen
  Home: TabNavigator
});

export default createAppContainer(AppNavigator);