реагировать на навигацию - StacksNavigators в BottomTabsNavigator

Question

У меня проблема с реагирующей навигацией - я хотел, чтобы каждая страница в tabNavigator имела созданный мной заголовок, поэтому я изменил экран evey (Дом, Действие, Настройки) на Self stackNavigator и добавил заголовок для каждого.

проблема в том, что он показывает мне заголовок только в HomeStackScreen, а в остальных я вижу только белый экран ...

Стеки

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import HomeScreen from "../screens/HomeScreen";
import ActionScreen from '../screens/ActionScreen';
import SettingsScreen from '../screens/SettingsScreen';
import AppHeader from '../components/AppHeader';


export const HomeStackScreen = createAppContainer(createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
}));

export const ActionStackScreen = createAppContainer(createStackNavigator({
  Action: {
    screen: ActionScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
}));

export const SettingsStackScreen = createAppContainer(createStackNavigator({
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
}));

 

TabBottom

import React from "react";
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";

import { MaterialCommunityIcons } from "@expo/vector-icons";

import {HomeStackScreen, ActionStackScreen, SettingsStackScreen} from './HomeStack';


const HomeBottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeStackScreen,
      navigationOptions: {
        tabBarIcon: ({ focused }) => (
          <MaterialCommunityIcons
            name={focused ? "home" : "home-outline"}
            size={32}
            style={{color: '#C60900', marginTop: 5}}
          />
        )
      }
    },
    Action: {
      screen: ActionStackScreen,
      navigationOptions: {
        tabBarIcon: ({ focused }) => (
          <MaterialCommunityIcons
            name={focused ? "flash" : "flash-outline"}
            size={32}
            style={{color: '#C60900', marginTop: 5}}
          />
        )
      }
    },
    Settings: {
      screen: SettingsStackScreen,
      navigationOptions: {
        tabBarIcon: ({ focused }) => (
          <MaterialCommunityIcons
            name={focused ? "settings" : "settings-outline"}
            size={32}
            style={{color: '#C60900', marginTop: 5}}
          />
        )
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#C60900",
      inactiveTintColor: '#C60900',
      labelStyle: {
        fontSize: 14
      },
      style: {
        borderTopWidth: 0.8,
        borderColor: "gray"
      }
    }
  }
);

export default createAppContainer(HomeBottomTabNavigator);

картинки, чтобы увидеть то, что я вижу:

HomeScreen - Работает хорошо

Экран ActionScreen Экран настроек - Работа Dosent

Answer 1

Вы не должны создавать несколько приложений в своем приложении. Может быть только один appcontainer.

Оберните ваш родительский навигатор внутри appcontainer. Они делают home, action и setting только как stacknavigator

поток будет appcontainer> bottomNavigator-> [homestack, actionstack, settingStatck ]

вот код ...

export const HomeStackScreen = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
});

export const ActionStackScreen = createStackNavigator({
  Action: {
    screen: ActionScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
});

export const SettingsStackScreen = createStackNavigator({
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
       header: () => <AppHeader />
    }
  }
});

//---------------

//Your bottom tab navigator  is fine.