BottomTabNavigator 不显示选项卡并且在 React Native 中位于顶部而不是底部

Question

我的底部导航器： 首先，在顶部； 其次，不显示我的任何页面； 我的代码： 应用程序.js

import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './Screens/HomeScreen'
import InternetScreen from './Screens/InternetScreen'
import GroupScreen from './Screens/GroupScreen'

const homeName = "Home"
const internetName = "Internet"
const groupName = "Group"

export default function App() {

  const Tab = createBottomTabNavigator()

  return (
    <NavigationContainer>
       <Tab.Navigator>

        <Tab.Screen name={homeName} component={HomeScreen} />
        <Tab.Screen name={internetName} component={InternetScreen} />
        <Tab.Screen name={groupName} component={GroupScreen} />

      </Tab.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js 和其他（它们很相似）

import { View, Text, StyleSheet, SafeAreaView } from 'react-native';

const HomeScreen = () => {
    return (
        <SafeAreaView>
            <View style={styles.container}>
                <Text style={styles.text}>Home Page</Text>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 16
    }
});

export default HomeScreen;

index.html 只是为应用程序创建根目录

我尝试了在互联网上可以找到的所有指南，但没有任何帮助 结果： 在此输入图片描述

Answer 1

几乎没有什么需要改变的，像这样将样式移到函数上方

 const styles = StyleSheet.create({})
    const HomeScreen = () => {
    return (
        <SafeAreaView>
            <View style={styles.container}>
                <Text style={styles.text}>Home Page</Text>
            </View>
        </SafeAreaView>
    );
};

我测试了一下，效果很好。