Использование Tab и Stack Navigator вместе

Question

Я создаю приложение на React-Native, для которого я использую React-Navigation

Теперь внутри я использую Stack-Navigation и TabNavigator (обновил его DrawerNavigator)

import { 
  createStackNavigator,
   TabNavigator,
   DrawerNavigator
 } from 'react-navigation';

import CoinCapCharts from "./src/container/CoinCapCharts.js"

import CoinCap from './src/container/CoinCap.js';


//THis is being Exported to App.js

 export const Tab = TabNavigator({
  TabA: {
    screen: CoinCap 
  },
  TabB: {
    screen: CoinCap
  }
}, {
  order: ['TabA', 'TabB'],
  animationEnabled: true,
})

export const MyScreen = createStackNavigator({
  Home: { 
    screen: CoinCap
  },
  CoinCapCharts: {
     screen: CoinCapCharts
    }
},{
    initialRouteName: 'Home',
    headerMode: 'none'
});


export const Drawer = DrawerNavigator({
  Tabs: { screen: Tab },
  Stack: { screen: MyScreen },
})

Я импортирую это в мой App.js, где я делаю что-то вроде этого

import React from 'react';
import {
  Drawer
 }from './Screen.js';
import {
  View
} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
    <View>
      <Drawer/>
      <Tab/>
      </View>
    );
  }
}

Теперь, это действительно показывает Tab во время первого запуска моегоприложение, но после того, как я перехожу на другой экран и возвращаюсь назад, кажется, что эта вкладка снова не отображается

[Вопрос:] Что я могу сделать неправильно и как я могу это исправитьэто?

Answer 1

Попробуйте определить одно внутри другого.Что-то вроде:

const Tab =  TabNavigator({
  TabA: {
    screen: Home 
  },
  TabB: {
    screen: Home
  }
}, {
  order: ['TabA', 'TabB'],
  animationEnabled: true,
})

export const MyStack = createStackNavigator({
  Home: { 
    screen: Home 
  },
  CoinCapCharts: {
     screen: CoinCapCharts
  },
  Tab: { 
    screen: Tab
  },
},{
    initialRouteName: 'Home',
    headerMode: 'none'
});

Теперь, визуализируйте MyStack (не уверен, что Screen - лучшее имя:)

export default class App extends React.Component {
  render() {
    return (
    <View>
      <MyStack />
      </View>
    );
  }
}