如何使用可触摸的不透明按钮切换屏幕，以及在哪里以及如何放置导航。我什至不知道从哪里或如何开始

问：

我有一个索引.js屏幕，我做了一个HomeScreen.js屏幕。我制作了一个可触摸的不透明度按钮，一旦按下，它就会从索引.js屏幕转到主屏幕.js。我尝试观看有关如何使用导航移动屏幕的教程和阅读指南，但没有任何效果。我不知道我的代码是否有问题，或者我是否做错了。这是我拥有的所有代码。

索引.js

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
import * as Font from 'expo-font';

let customFonts = {
    'Monospace': require('./assets/fonts/Monospace.ttf'),
  };
    
      
      export default class App 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>
                <TouchableOpacity onPress={() => {console.log('Enter button was presssed')}}>
                <View style={styles.buttonContainer} >
                <Text style={styles.buttonText}>Enter</Text>
                </View>
                    </TouchableOpacity>
              
            </View>
    )};
   
          }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: "#dddddd",
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 30,
        },
        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',
            padding: -3,
            paddingRight: 20,
            paddingLeft: 20,
            borderRadius: 20,
            textAlign: 'center',
        },
        buttonText: {
            textTransform: 'uppercase',
            color: 'black',
            fontSize: 25,
            textAlign: 'center',
            fontFamily: 'Monospace'
        },
    });

HomeScreen.js

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

const HomeScreen = () => {
    return(
        <View style={{flex : 1,justifyContent : 'center',alignContent: 'center'}}>
            <Text>Home View</Text>
        </View>
    )
}

export default HomeScreen;

_Layout.js

import { Stack } from 'expo-router';


export default function HomeLayout() {
    return (
        <Stack screenOptions={{ 
            headerStyle: {
                backgroundColor: '#dddddd'
              },
              title: '',
              headerTintColor: '#dddddd',
              headerShadowVisible: false, // applied here
            headerBackTitleVisible: false,
         }} />
    )
}

我不确定我是否安装了我需要的正确依赖项，但我主要遵循 react 导航网站的这种方法。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

我也不知道是不是因为我的导出不同，因为我使用了负载。同步以添加等宽字体。

这是我的 Index.js 屏幕的图片。

索引.js屏幕图像