React Navigation - 为什么导航栏出现在 header 下面而不是底部

Question

这是容器文件。在这里，我已经为底部导航定义了所有必需的细节，它呈现在屏幕顶部，但它应该呈现在屏幕底部。

import { NavigationContainer } from "@react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

import HomeScreen from "./Fragments/HomeScreen";
import WalletScreen from "./Fragments/WalletScreen";
import ProfileScreen from "./Fragments/ProfileScreen";
import { StyleSheet, View } from "react-native";
const Tab = createBottomTabNavigator();

import { Platform } from "react-native";
export const tabBarHeight = Platform.OS === "ios" ? 60 : 45;
function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarStyle: {
            backgroundColor: "#03dbfc",
            height: tabBarHeight,
          },
          tabBarActiveTintColor: "white",
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Wallet"
          component={WalletScreen}
          options={{
            tabBarLabel: "Wallet",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="wallet" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarLabel: "Profile",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="face" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default MyTabs;

我看不到每个屏幕或片段的内容。

Home.js

import { Text } from "react-native";

const HomeScreen = ({ navigation }) => {
  return <Text>Home</Text>;
};

export default HomeScreen;

Profile.js

import React from "react";
import { Text } from "react-native";

const ProfileScreen = ({ navigation }) => {
  return <Text>Profile</Text>;
};

export default ProfileScreen;

Wallet.js

import React from "react";
import { Text } from "react-native";

const WalletScreen = ({ navigation }) => {
  return <Text>Wallet</Text>;
};

export default WalletScreen;

请回答这个问题我是 react-native 的新手。

App.js

import { NavigationContainer } from "@react-navigation/native";

import Header from "./components/Header/Header";
import BottomNavigation from "./components/BottomNavigation/BottomNavigation";
export default function App() {
  return (
    <View>
      <Header title="ApnaPayment" />
      <BottomNavigation />
    </View>
  );
}

Answer 1

出现此问题是因为 App.js 上的 View 缩小了页面内容。您不需要创建 header 组件，react-navigation 会为您提供。我建议您删除 App.js 上的 header 组件，并将 header 标题添加为导航器上的屏幕选项。另一个提示是您不需要定义选项卡的高度，react-navigation 默认也提供了它。按照下面的示例代码。

使用导航器归档：

// Some code above...

function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarStyle: {
            backgroundColor: "#03dbfc",
          },
          tabBarActiveTintColor: "white",
          title: "ApnaPayment",
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Wallet"
          component={WalletScreen}
          options={{
            tabBarLabel: "Wallet",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="wallet" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarLabel: "Profile",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="face" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default MyTabs;

你的App.js：

// Some code above...

export default function App() {
  return (
    <BottomNavigation />
  );
}

React Navigation - 为什么导航栏出现在 header 下面而不是底部

React Navigation - why navigation bar is appearing below header but not at the bottom

react-native

bottomnavigationview