世博參考使用和導航容器沖突

Question

我正在使用 Expo Camera 為個人資料表單拍攝一些用戶照片。 發生的事情是當我嘗試將相機的 ref 設置為它崩潰的狀態並拋出以下錯誤時。

找不到導航上下文。 您是否使用“NavigationContainer”包裝了您的應用程序？ 有關設置說明，請參閱https://reactnavigation.org/docs/getting-started 。

一切都在導航容器內，我真的不知道發生了什么。

每次我從 Expo Camera 組件評論ref={(ref) => console.tron.log(ref)}時一切正常，但是當我取消注釋 ref 行時我得到錯誤。

自上周以來我就被困在這里，互聯網上沒有關於這個問題的任何信息......

提前致謝 =)

應用程序.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider } from './src/context/authContext';

import Routes from './src/routes';
import Theme from './src/theme';
import './src/config/reactotron.config';

export default function App() {
    return (
        <Theme>
            <AuthProvider>
                <NavigationContainer>
                    <Routes />
                </NavigationContainer>
            </AuthProvider>
        </Theme>
    );
}

路由.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import arrowLeft from '../../assets/img/arrow-left-header.png';

import SignUp from '../pages/auth/SignUp';
import Profile from '../pages/auth/Profile';
import Login from '../pages/auth/Login';
import Habits from '../pages/auth/Habits';
import AddChildren from '../pages/auth/AddChildren';
import ChildProfile from '../pages/auth/ChildProfile';
import RegisterFinish from '../pages/auth/RegisterFinish';
import { CameraView } from '../components';

const AuthStack = createStackNavigator();
const theme = {
    color: {
        brandPrimary: '#16B4A1',
        white: '#fff',
    },
};

const AuthRoutes = () => {
    return (
        <AuthStack.Navigator
            screenOptions={{
                headerTintColor: theme.color.white,
                headerStyle: {
                    backgroundColor: theme.color.brandPrimary,
                },
                cardStyle: {
                    backgroundColor: theme.color.white,
                },
                headerBackTitle: 'Voltar',
            }}
        >
            <AuthStack.Screen
                name='Profile'
                component={Profile}
                options={{
                    headerLeft: null,
                }}
            />
            <AuthStack.Screen
                name='Login'
                component={Login}
                options={{ headerShown: false }}
            />

            <AuthStack.Screen
                name='SignUp'
                component={SignUp}
                options={{ headerShown: false }}
            />
            
            <AuthStack.Screen
                name='RegisterFinish'
                component={RegisterFinish}
                options={{
                    headerLeft: null,
                    headerShown: false,
                }}
            />
            <AuthStack.Screen
                name='TakeAPicture'
                component={CameraView}
                options={{
                    headerLeft: null,
                    headerShown: false,
                }}
            />
            <AuthStack.Screen name='Habits' component={Habits} />
            <AuthStack.Screen name='AddChildren' component={AddChildren} />
            <AuthStack.Screen name='ChildProfile' component={ChildProfile} />
        </AuthStack.Navigator>
    );
};

export default AuthRoutes;

CameraView.js

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import { Camera } from 'expo-camera';
import { FontAwesome5 } from '@expo/vector-icons';

import { CameraButton, CameraButtonRing } from './styles';

const CameraView = ({ route, navigation }) => {
    const cameraRef = useRef()
    // CAMERA SETTINGS
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(Camera.Constants.Type.front);

    useEffect(() => {
        console.tron.log('rolou')
        async function handleCameraPermission() {
            const { status } = await Camera.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        }
        handleCameraPermission();
    }, []);

    const handleTakePictureButton = async () => {
        if (!cameraRef) {
            console.tron.log('Não tem cam ref')
            return
        };
        let photo = await cameraRef.takePictureAsync();
        console.tron.log(photo)
        handlePicture(photo)
    }

    return (
        <View style={{ flex: 1 }}>
            <Camera
                style={{ flex: 1 }}
                type={type}
                ref={(ref) => console.tron.log(ref)}
            >
                <View
                    style={{
                        flex: 1,
                        backgroundColor: 'transparent',
                        flexDirection: 'row',
                        border: '1px solid red '
                    }}
                >
                    <TouchableOpacity
                        style={{
                            // flex: ,
                            // alignSelf: 'flex-end',
                            // alignItems: 'center',
                            position: 'absolute',
                            bottom: 40,
                            right: 32,
                        }}
                        onPress={() => {
                            setType(
                                type === Camera.Constants.Type.back
                                    ? Camera.Constants.Type.front
                                    : Camera.Constants.Type.back
                            );
                        }}
                    >
                        <FontAwesome5 name='sync-alt' size={32} color='#fff' />
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={{
                            // flex: 0.1,
                            alignSelf: 'flex-end',
                            height: 56,
                            width: 56,
                            backgroundColor: 'transparent',
                            marginLeft: 'auto',
                            marginRight: 'auto',
                            marginBottom: 24,
                            border: '1px solid red'
                        }}
                        onPress={handleTakePictureButton}
                    >
                        <View style={{position: 'relative'}}>
                            <CameraButton />
                            <CameraButtonRing />
                        </View>
                    </TouchableOpacity>
                </View>
            </Camera>
        </View>
    );
};


export default CameraView;

Answer 1

對於遇到這個問題的任何人，我真的不知道背后的原因，但是導致我的應用程序崩潰並出現完全相同錯誤的原因是試圖登錄到 Reactotron。 這是與問題代碼唯一的共同點，在刪除它之后，應用程序不再崩潰並且運行良好。

現在...如果有人發現原因，我也很想知道。