使用相机拍摄照片,然后导航到另一个有后退按钮的页面,点击事件我再次导航到相机,但这次相机冻结但我可以点击另一张照片。
如果导航流是摄像头,则观察到摄像头冻结=>其他组件(例如,相机点击图片视图)=>相机。
如果导航流是其他组件(例如,除了摄像机之外的任何东西)=>相机,然后相机冻结没有发生。可能需要杀死相机的东西,然后导航应该发生。
答案 0 :(得分:0)
我已经解决了这个问题,但是在互联网上进行了几次搜索后,我使用componentDidMount
在选项卡之间切换时,反应导航不会卸载组件。因此,当您离开并返回带有摄像头组件的屏幕时,它将只是黑色视图。因此,一个好的解决方案是使用componentDidMount
并添加两个侦听器willFocus
和willBlur
来帮助您安装和卸载视图。
componentDidMount() {
const { navigation } = this.props;
navigation.addListener('willFocus', () =>
this.setState({ focusedScreen: true })
);
navigation.addListener('willBlur', () =>
this.setState({ focusedScreen: false })
);
}
render() {
const { isPermitted, focusedScreen } = this.state;
if (isPermitted === null) {
return (<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<Text>Error</Text>
</View>);
} else if (isPermitted === false) {
return (<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<ActivityIndicator size="large" style={{color:'blue', fontSize:30}} />
<Text>No Acceas to camera</Text>
</View>);
} else if (focusedScreen){
return ( <View>
<FullPageLoader isVisible={this.state.isLoader} TextToShow={this.state.loaderText} />
<CameraKitCameraScreen
actions={{ leftButtonText: <Icon name='close' style={{color:'white',fontSize:30}}/>,rightButtonText: <Icon name='images' style={{color:'white',fontSize:40}}/> }}
onBottomButtonPressed={event => this.onBottomButtonPressed(event)}
ref= {(cam) => {
this.camera = cam;
}}
flashImages={{
on: require('./img/flashon.png'),
off: require('./img/flashoff.png'),
auto: require('./img/flashauto.png'),
}}
TopTitle={this.state.title}
cameraFlipImage={require('./img/flip-camera.png')}
captureButtonImage={require('./img/capture.png')}
cameraOptions={{
flashMode: 'auto', // on/off/auto(default)
focusMode: 'on', // off/on(default)
zoomMode: 'on', // off/on(default)
ratioOverlayColor: '#00000077'
}}
style={{height:'100%'}}
/>
</View>);
}else{
return (<Text>Camera Error</Text>);
}
}
参考:https://github.com/react-native-community/react-native-camera/blob/master/docs/react-navigation.md
答案 1 :(得分:0)
对于那些使用Expo和React Native功能组件的人来说,这变得更加复杂。
对于那些初到的人来说,问题在于React Native屏幕不会在休假时破坏相机。您可以创建多个摄像头屏幕,但是当您返回上一个摄像头屏幕时,预览似乎冻结,因为该屏幕上的摄像头永远不会重新初始化。
我的解决方案是创建一个摄像头并切换UI,以便有条件地在其周围渲染组件以适应UI的需求。
类似这样的东西:
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
export default function App() {
const [hasCameraPermission, setHasCameraPermission] = useState(false);
const [cameraMode1, setCameraMode1] = useState(true);
const takePicture = async () => {
if (cameraMode1) {
alert("Picture mode 1");
setCameraMode1(false);
} else {
alert("Picture mode 2");
setCameraMode1(true);
}
}
useEffect(() => {
async function getCameraStatus() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
setHasCameraPermission(status == 'granted');
}
getCameraStatus();
}, [hasCameraPermission]);
return (
<View style={{ flex: 1}}>
<Camera
style={[StyleSheet.absoluteFillObject]}
/>
{cameraMode1 ?
<Button
title="Camera Mode 1"
onPress={() => { takePicture() }}
/>
:
<Button
title="Camera Mode 2"
onPress={() => { takePicture() }}
/>
}
</View>
);
}