尝试导航时在 expo 中显示错误 "cant find variable: navigation"

Question

我正在尝试使用 react-navigation 导航到另一个页面，但它一直显示相同的错误，这是我的代码，我正在使用 expo :

Homepage.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

export default function HomePage({navigation}) {


    return (
        <View >
            <SafeAreaView>
                <TouchableOpacity  onPress = {() => {
                    navigation.navigate('Details')}}>
                </TouchableOpacity>
            </SafeAreaView>
        </View>
    );
}

App.js

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import Homepage from './Homepage'
import Details from './Details'

const Stack = createNativeStackNavigator();





export default function App({navigation}) {

    
    return ( 
        <View style={styles.container}>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                    name="Homepage"
                    component={Homepage}
                    />
                    <Stack.Screen
                    name="Details"
                    component={Details}
                    />
                </Stack.Navigator>
            </NavigationContainer>
            <TouchableOpacity
            style={styles.Touchable1}
            onPress={({navigation}) => navigate('Home')}
            >
                <Text style={styles.text1}>
                Home
                </Text>
            </TouchableOpacity>
        </View>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    Touchable1: {
        width: "40%", 
        height: "20%",
        margin: 10,
        backgroundColor: "gray",
        marginVertical: 400,
    },
    text1: {
        fontWeight: 'bold',
        fontSize: 18,
        width: 300,
        marginTop: 60,
        marginHorizontal: 50,
    }
});

Details.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function DetailsPage({navigation}) {
    return (
        <View>
          <Text>Hello</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    
});

Answer 1

首先 - 您尝试在导航容器外部导航
其次 - 您有屏幕主页，但尝试导航至主页屏幕（此屏幕不存在）

我建议您从详细信息屏幕导航到主页

export default function App({navigation}) {

    
    return ( 
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                    name="Homepage"
                    component={Homepage}
                    />
                    <Stack.Screen
                    name="Details"
                    component={Details}
                    />
                </Stack.Navigator>
            </NavigationContainer>
    );
}

export default function DetailsPage({navigation}) {
    return (
        <View>
          <Text>Hello</Text>
            <TouchableOpacity
              style={styles.Touchable1}
              onPress={({navigation}) => navigate('Homepage')}
            >
                <Text style={styles.text1}>
                Navigate to Home
                </Text>
            </TouchableOpacity>
        </View>
    );
}

尝试导航时在 expo 中显示错误 "cant find variable: navigation"

When trying to navigate displays error "cant find variable: navigation" in expo

javascript

react-native

touchableopacity

react-navigation

expo