嘗試導航到將在手機上打開相機的文件時，未定義不是對象（評估“navigation.navigate”）

Question

我正在嘗試導航到我的頁面“CameraPage.js”，但出現此錯誤“未定義不是對象（正在評估'navigation.navigate'）”。 任何人都可以看到問題嗎？ 這是我在這里的第一個問題，所以請告訴我是否可以更具體。

這是我的 App.js：

 import { StyleSheet, Text, View, TouchableOpacity, Pressable } from 'react-native'; import React, {useEffect, useState} from "react"; import { FontAwesome } from '@expo/vector-icons'; import { useNavigation } from '@react-navigation/native'; export default function App({ navigation }) { return ( <View style={styles.container}> <View style={styles.buttonContainer}> <TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}> <FontAwesome name="camera" size={100} color="#FFB6C1" /> </TouchableOpacity> <Pressable> <FontAwesome name="photo" size={100} color="#FFB6C1" /> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFDBE9' }, buttonContainer: { backgroundColor: 'transparent', justifyContent: 'space-between', }, });

這是我的 CameraPage.js 文件：

 import {StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import {Camera, CameraType} from 'expo-camera'; import {useEffect, useState} from "react"; export default function CameraPage() { const [hasPermission, setHasPermission] = useState(null); const [type, setType] = useState(CameraType.back); useEffect(() => { (async () => { const {status} = await Camera.requestCameraPermissionsAsync(); setHasPermission(status === 'granted'); })(); }, []); if (hasPermission === null) { return <View/>; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return ( <View style={styles.container}> <Camera style={styles.camera} type={type}> <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={() => { setType(type === CameraType.back ? CameraType.front : CameraType.back); }}> <Text style={styles.text}> Flip </Text> </TouchableOpacity> </View> </Camera> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, camera: { flex: 1, }, buttonContainer: { flex: 1, backgroundColor: 'transparent', flexDirection: 'row', margin: 20, }, button: { flex: 0.1, alignSelf: 'flex-end', alignItems: 'center', }, text: { fontSize: 18, color: 'white', }, });

這是我的導航文件：

 import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import {NavigationContainer} from '@react-navigation/native'; import CameraPage from "../Camera/CameraPage"; const Routes = createStackNavigator(); export default function Navigator() { return ( <NavigationContainer> <Routes.Navigator> <Routes.Screen name="CameraFunction" component={CameraPage} /> </Routes.Navigator> </NavigationContainer> ); }

Answer 1

您的導航容器必須包裹在應用程序的根目錄周圍，否則導航對象將不會傳遞給您定義為屏幕的組件。

以下解決了您的問題。

export default const App = () => {
    return (
        <NavigationContainer>
            <Routes.Navigator>
                <Routes.Screen name="Home" component={HomeScreen} />
                <Routes.Screen
                    name="CameraFunction"
                    component={CameraPage}
                    />
            </Routes.Navigator>
        </NavigationContainer>
    );
}

您的HomeScreen包含來自App的舊代碼，但現在您可以訪問導航對象，因為我們已將 HomeScreen 定義為導航器內的屏幕。 它將由導航框架傳遞到該屏幕。 還要注意HomeScreen是應用程序的初始屏幕。

export default function HomeScreen({ navigation }) {

    return (
        <View style={styles.container}>
            <View style={styles.buttonContainer}>
                <TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}>
            <FontAwesome name="camera" size={100} color="#FFB6C1" />
                </TouchableOpacity>
                <Pressable>
            <FontAwesome name="photo" size={100} color="#FFB6C1" />
                </Pressable>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFDBE9'
    },
    buttonContainer: {
        backgroundColor: 'transparent',
        justifyContent: 'space-between',
    },
});

請注意，導航到 CameraPage 后，您需要導航回 HomeScreen。 您也可以使用 CameraPage 中的導航對象並觸發navigation.goBack來實現此效果。

Answer 2

您只需在 App.js 文件中使用 @react-navigation/native-stack 代替 @react-navigation/stack 即可完美運行，

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Home from './TopTabBar/Home';
import 'react-native-gesture-handler';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;