Как я могу вкладывать Bottom Tab Bar внутри стека Navigator?

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 { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator} from 'react-navigation-stack';

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);