React Native双头

pzfprimi  于 11个月前  发布在  React
关注(0)|答案(1)|浏览(125)

我有问题与React Native应用程序.我创建的应用程序与博览会和实现标签导航器,但我有双头的问题,我的标签导航器头工程,但我不明白从上面的头是从哪里来,所以现在我有双头问题.

我在谷歌上看了很多,看了教程,出于某种原因,然后看教程,默认头不存在的例子。我如何解决这个问题?
我的index.js

import * as React from 'react';
import Navigation from "../Navigation";

const Home = () => {
    return <Navigation />;
}
export default Home;

字符串
Navigation.js

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import ProfileScreen from "./screens/ProfileScreen";
import FeedScreen from "./screens/FeedScreen";
import {colors} from "./constants/theme";

const Tab = createBottomTabNavigator();

export default function Navigation() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color, size }) => {
                    let iconName;

                    if (route.name === 'Feed') {
                        iconName = "home";
                    } else if (route.name === 'Profile') {
                        iconName = "user"
                    }

                    return <AntDesign name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: colors.lightBlue,
                tabBarInactiveTintColor: colors.primaryDark,
                tabBarShowLabel: false,
            })}
        >
            <Tab.Screen name="Feed" component={FeedScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
    );
}


如果需要,还可以使用_layout.js

import { useCallback } from 'react';
import { Stack } from "expo-router";
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const Layout = () => {
    const [fontsLoaded, fontError] = useFonts({
        DMBold: require('../assets/fonts/DMSans-Bold.ttf'),
        DMMedium: require('../assets/fonts/DMSans-Medium.ttf'),
        DMRegular: require('../assets/fonts/DMSans-Regular.ttf'),
    });

    const onLayoutRootView = useCallback(async () => {
        if (fontsLoaded || fontError) {
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded, fontError]);

    if (!fontsLoaded && !fontError) {
        return null;
    }

    return <Stack onLayout={onLayoutRootView} />;
}

export default Layout;

nbysray5

nbysray51#

只需添加headerShown:false

<Tab.Navigator screenOptions={{headerShown:false}}/>

字符串
在那之后,你必须制作你自己的custom header,我已经在这里回答过了--为什么这个react native头文件不遵循我应用的风格?
所以基本上,这是Expo Snack的自定义头。

相关问题