如何在 react-native 中制作底部导航器？

Question

我一直在尝试为我的应用程序制作一个 BottomTabNavigator，但一直无法做到。请帮助我识别代码中的错误。

这是用 App.js 编写的代码

import * as React from 'react';

import  { createBottomTabNavigator }  from '@react-navigation/bottom-tabs';

import mapscreen from './screens/MapScreen';
import groupscreen from './screens/GroupScreen';


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

const Tab = createBottomTabNavigator();

export default () => (
         <NavigationContainer>
         
    <Tab.Navigator>

      <Tab.Screen name="map" component={mapscreen}/>

      <Tab.Screen name="group" component={groupscreen} />

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

这是用 MapScreen.js 编写的代码

import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';

export const mapscreen = () => {

    <View style = {styles.container}>
    <Text>
        Map will exist here!!
    </Text>
    </View>
};



const styles = StyleSheet.create({
    container: {
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      

    },
  });

这是在 GroupScreen.js 中编写的代码

import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';

export const groupscreen = () => {

    <View style = {styles.container}>
    <Text>
        group exist here!!
    </Text>
    </View>
};


const styles = StyleSheet.create({
    container: {
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',

    },
  });

Answer 1

工作应用：Expo Snack

几乎没有语法错误，除了一切都很好。

//App.js
import * as React from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MapsScreen from './screens/MapsScreen';
import GroupScreen from './screens/GroupScreen';

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

const Tab = createBottomTabNavigator();

export default App=() => (
  <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="Map" component={MapsScreen} />
      <Tab.Screen name="Group" component={GroupScreen} />
    </Tab.Navigator>
  </NavigationContainer>
);

//MapsScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default  MapsScreen = ({navigation}) => {
  return <View style={styles.container}>
    <Text>Map will exist here!!</Text>
  </View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

//GroupScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default GroupScreen = ({navigation}) => {
  return <View style={styles.container}>
    <Text>group exist here!!</Text>
  </View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});