ReactNative頂部區域視圖

我是 React Native 的新手，我正在測驗一個非常簡單的首頁。我唯一難以理解的是頂部區域的標題視圖。這是我的應用程式當前的樣子https://i.stack.imgur.com/H7vbO.png如您所見，有一個巨大的空白區域，其中包含“主頁”。我正試圖完全擺脫它，只在整個程序中使用我的背景顏色。我唯一的問題是我什至不知道那是從哪里來的。這是我的代碼，謝謝。

這是我的主螢屏

import React from "react";
import { StyleSheet, Text, SafeAreaView, Platform } from "react-native";
import { StatusBar } from "expo-status-bar";

const HomeScreen = ({}) => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={{ color: "white" }}>Home Screen</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#4B4B4B",
    alignItems: "center",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

export default HomeScreen;

這是我的 App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import MainTabScreen from "./screens/MainTabScreen";

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <MainTabScreen />
    </NavigationContainer>
  );
};

export default App;

這是我的 MainTabScreen

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";

import HomeScreen from "./HomeScreen";
import SearchScreen from "./SearchScreen";
import InboxScreen from "./InboxScreen";
import AccoutScreen from "./AccountScreen";

const Tab = createBottomTabNavigator();

const MainTabScreen = () => {
  return (
    <Tab.Navigator initialRouteName="Home" activeColor="#000000">
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-search" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Inbox"
        component={InboxScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-chatbox" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Account"
        component={AccoutScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-person" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MainTabScreen;

PS：我已經嘗試將 SafeAreaView 更改為僅查看，并且我還嘗試洗掉填充頂部

uj5u.com熱心網友回復：

該視圖實際上是導航器的標題。因此，要洗掉它，請在您的主導航器上設定headerShown: false.

在你的mainTabScreen;

<Tab.Navigator screenOptions={{headerShown: false}} initialRouteName="Home" activeColor="#000000">
...

休息會一樣。

uj5u.com熱心網友回復：

options底部選項卡接受導航器螢屏屬性中的標題相關選項和screenOptions導航器組件中的屬性

例如

const MainTabScreen = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#000000"
      // To remove header from all screens,
      // screenOptions={{ headerShown: false }}
      >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-home" color={color} size={26} />
          ),
          // Update Header Title
          // headerTitle: 'NOT A HOME',
        }}
      />
      <Tab.Screen
        name="Search"
        component={Home}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="ios-search" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

您可以在 - https://reactnavigation.org/docs/elements#header中閱讀所有與標題相關的選項

標籤：

上一篇：使用GluonhqConnect.Provider.RestClient查詢ElasticSearch正文

下一篇：從檔案而不是API讀取資料時代碼正在作業