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

Question

我有一个index.js 屏幕，我制作了一个HomeScreen.js 屏幕。我制作了一个可触摸的不透明度按钮，按下后希望从 index.js 屏幕转到 HomeScreen.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;

_布局.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,
         }} />
    )
}

我不确定我是否安装了所需的正确依赖项，但我主要遵循反应导航网站上的此方法。：

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 屏幕的图片。

Answer 1

您需要将所有屏幕添加到堆栈中。

export default function Layout() {
  return (
    <Stack
      screenOptions={{
         headerStyle: {
            backgroundColor: '#dddddd'
          },
          title: '',
          headerTintColor: '#dddddd',
          headerShadowVisible: false, // applied here
          headerBackTitleVisible: false,
      }}>
      {/* Add your screens here, like these added below */}
      <Stack.Screen name="HomeScreen" options={{}} />
      <Stack.Screen name="Details" options={{}} />
    </Stack>
  );
}