Question

错误如下：

使用以下命令从登录屏幕导航到粘贴的代码 navigation.navigate('EditableCamera')
点按即可拍照
通过调用将您导航到另一个屏幕导航。导航（'感觉'）。成功带你到那个屏幕。
在该屏幕和数据上执行与 Expo Camera 无关的操作提交您被带回 EditableCamera 通过 navigation.navigate('EditableCamera')
当你降落在那里时，除了相机之外，一切看起来都正常未运行（在覆盖层上写有“翻转”的黑屏）。如果您按“翻转”它会唤醒相机并正常运行，但如果您不这样做，只需轻按即可拍照，您会连续出现以下错误。
https://i.stack.imgur.com/CipdP.png
如果您在点击拍照前按“翻转”，相机将唤醒并根据需要拍摄正面或背面照片，然后是再次导航到“感觉”屏幕的适当操作。
如果你再次唤醒相机，这个导航循环可以无限期地继续（预期结果），无需刷新再次打开相机。如果你不按“翻转”来唤醒相机，但是，您将永远无法拍摄另一张照片并导航到 “感觉”屏幕。

我花了几天时间试图弄清楚这一点，基本上包括我在论坛上从遇到类似问题的人那里读到的所有其他补救措施。 withNavigationFocus 的实现对大多数人来说似乎解决了这个问题，但就我而言，结果根本没有改变。

非常感谢您的帮助！

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import { useRef } from 'react';
import { connect } from 'react-redux'
import { addPhoto, addVideo } from '../redux/actions'
import { storagePicUpload, storageVideoUpload } from '../tools/storage'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { uuid } from '../tools/uuid'
import { withNavigationFocus } from 'react-navigation'


let EditableCamera = (props) => {
    const insets = useSafeAreaInsets()
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(Camera.Constants.Type['back']);
    const cameraRef = useRef(null)

    useEffect(() => {
        (async () => {
            const { status } = await Camera.requestPermissionsAsync()
            
            setHasPermission(status === 'granted')
        })();
    }, []);

    if (hasPermission === null) {
        return <View />;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    let snap = async () => {
        if (cameraRef) { 
            let photo = await cameraRef.current.takePictureAsync({ exif: true })

            if (photo) {
                storagePicUpload(photo)
                    .then((uploadInfo) => {
                        props.addPhoto(uploadInfo)
                    })
                    .catch(err => {
                        console.log('err', err)
                    })
                props.navigation.navigate('Feeling')
            }
        }
    }

    let record = async () => {
        if (cameraRef) { 
            let video = await cameraRef.current.recordAsync({
                maxDuration: 10
            })
            if (video) {
                storageVideoUpload(video)
                    .then((uploadInfo) => {
                        props.addVideo(uploadInfo)
                    })
                    .catch(err => {
                        console.log('err', err)
                    })
                props.navigation.navigate('Feeling')
            }
        }
    }

    let endRecording = () => {
        cameraRef.current.stopRecording()
    }

    let renderControls = () => {

        return (
            <View style={styles.buttonContainer}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => {
                        setType(
                        type === Camera.Constants.Type.back
                            ? Camera.Constants.Type.front
                            : Camera.Constants.Type.back
                        );
                }}>
                    <Text style={styles.text}> Flip </Text>
                </TouchableOpacity>
            </View>
        )
    }

    return (
        <TouchableOpacity
            style={[styles.container, { paddingTop: insets.top }]}
            delayLongPress={300}
            onPress={(() => {
                snap()
            })}
            onLongPress={(() => {
                record()
            })}
            onPressOut={() => {
                endRecording()
            }}
            key={uuid()}
            >
            { props.navigation.isFocused && <Camera 
                style={styles.camera} 
                type={type}
                ratio={'16:9'}
                autoFocus={'on'}
                zoom={0}
                whiteBalance={'auto'}
                ref={cameraRef}
                key={uuid()}

            >
                {renderControls()}
            </Camera>}
        </TouchableOpacity>
        
    )
}

export default withNavigationFocus(connect(null, { addPhoto, addVideo })(EditableCamera))

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',
    },
});```

使用反应导航（抽屉）导航屏幕后，Expo Camera 未打开/运行

0 个答案: