我正在尝试在我的反应本机应用程序上设置导航，但是在尝试导入时，我的索引.js文件在一个小部分上不断出现错误

问：

我有一个索引.js文件，一个App.js文件，一个Styles.js文件和一个HomeScreen.js文件。我有一个名为 enter 的可触摸不透明度按钮，我想在按下时将您带到 HomeScreen.js 屏幕。但是由于某种原因，我的错误，它阻止了整个事情的运行。我粘贴了下面所有文件中的所有代码。我想我只需要一个更有经验的人给我一双新的眼睛，看看我做错了什么。import Main App from './App.js';

索引.js

import MainApp from './App.js'; // Importing your MainApp component from App.js
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './Screens/HomeScreen.js';

const Stack = createNativeStackNavigator();

const RootContainer = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="MainApp" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MainApp" component={MainApp} />
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

AppRegistry.registerComponent('the_app', () => RootContainer);

App.js

import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import * as Font from 'expo-font';
import { styles } from './Styles.js'; // Include the file extension

let customFonts = {
  'Monospace': require('./assets/fonts/Monospace.ttf'),
};

class MainApp extends React.Component {
  state = {
    fontsLoaded: false,
  };

  async _loadFontsAsync() {
    await Font.loadAsync(customFonts);
    this.setState({ fontsLoaded: true });
  }

  componentDidMount() {
    this._loadFontsAsync();
  }

  render() {
    if (!this.state.fontsLoaded) {
      return null;
    }

    return (
      <View style={styles.container}>
        <Text style={styles.titleText}>Cheqz</Text>
        <Text style={styles.welcomeText}>Welcome!</Text>
        <Text style={styles.questionText}>Ready to be productive?</Text>
        <NavigateToHomeButton />
      </View>
    );
  }
}

function NavigateToHomeButton() {
  const navigation = useNavigation();

  return (
    <TouchableOpacity onPress={() => navigation.navigate('Home')}>
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>Enter</Text>
      </View>
    </TouchableOpacity>
  );
}

export default MainApp; ```

Styles.js
```import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#dddddd",
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    position: 'relative',
    bottom: 190,
    fontSize: 55,
    fontFamily: 'Monospace',
    backgroundColor: '#cccccc',
    padding: 50,
    borderRadius: 200,
  },
  welcomeText: {
    fontSize: 25,
    position: 'relative',
    bottom: 130,
    fontFamily: 'Monospace',
  },
  questionText: {
    fontSize: 25,
    position: 'relative',
    bottom: 120,
    fontFamily: 'Monospace',
  },
  buttonContainer: {
    height: 40,
    marginHorizontal: 10,
    backgroundColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: 20,
    paddingLeft: 20,
    borderRadius: 20,
    textAlign: 'center',
  },
  buttonText: {
    textTransform: 'uppercase',
    color: 'black',
    fontSize: 25,
    textAlign: 'center',
    fontFamily: 'Monospace',
  },
}); ```

Here is a picture of my file structure just in case there is something wrong with that.:

[My file structure][1]


  [1]: https://i.stack.imgur.com/LIOjq.png