尝试导航时在博览会中显示错误“找不到变量：导航”答案

【问题标题】：When trying to navigate displays error "cant find variable: navigation" in expo尝试导航时在博览会中显示错误“找不到变量：导航”
【发布时间】：2021-12-30 15:46:38
【问题描述】：

我正在尝试使用 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({
    
});

【问题讨论】：

标签： javascript react-native expo react-navigation touchableopacity

【解决方案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>
    );
}

【讨论】：

成功了，谢谢