[英]Expo Ref usage and Navigation Container Conflicting
我正在使用 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;
对于遇到这个问题的任何人,我真的不知道背后的原因,但是导致我的应用程序崩溃并出现完全相同错误的原因是试图登录到 Reactotron。 这是与问题代码唯一的共同点,在删除它之后,应用程序不再崩溃并且运行良好。
现在...如果有人发现原因,我也很想知道。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.