反应导航-BottomTabsNavigator中的StacksNavigators

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-Works好

ActionScreenSettingsScreen-已完成的工作

我在反应导航中遇到问题-我想做的是，tabNavigator中的每个页面都将具有我创建的标题，因此我将evey屏幕（“主页”，“操作”，“设置”）更改为“自我” ...

Answer 1

您不得在您的应用中创建多个Appcontainer。只有一个appcontainer。