2

我正在视图中创建一个带有相机的 ViewPager，当 ViewPager 呈现视图时一切正常，但是当 ViewPager 更改页面并返回相机页面时，相机不再出现。如何解决这个问题？有没有办法异步渲染相机？

这是我的 ViewPager：

import React from 'react';
import ViewPager from '@react-native-community/viewpager';
import { View } from 'react-native';

const Pager = ({
    pages,
    initalPage,
    onPageSelected,
    onPageScrollStateChanged,
    onPageScroll
}) => {
    return (
        <ViewPager 
            style={{flex: 1}} 
            initialPage={initalPage} 
            onPageSelected={(e)=>onPageSelected && onPageSelected(e.nativeEvent)}
            onPageScrollStateChanged={(e)=>onPageScrollStateChanged && onPageScrollStateChanged(e.nativeEvent)}
            onPageScroll={(e)=>onPageScroll && onPageScroll(e.nativeEvent)}
        >
            {
                pages.map((page,i)=>
                    <View key={i} style={{flex: 1}}>
                        {
                            page
                        }
                    </View>
                )
            }
        </ViewPager>
    )
}
export default Pager;

这是我的相机页面：

import React, { useEffect, Suspense, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera } from 'expo-camera';
import { LinearGradient } from 'expo-linear-gradient';
import { color } from '../../utils';

const ScannerView = ({
    isInView,
}) => {

    let camera = null;

    const [hasPermission, setHasPermission] = useState(null);
    const [cameraRatio, setCameraRatio] = useState('1:1');

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

    const handleCameraReady = () => {
        camera.getSupportedRatiosAsync().then((data)=>{
            setCameraRatio(data[data.length-1]);
        });
    }

    const handleBarcodeScanned = (data) => {
        console.log(data);
    }

    const handleThis = (err) => {
        console.log("EVENT",err.nativeEvent)
    }


    const renderCamera = (
        <Camera
            ref={ref=>{
                camera=ref;
            }}
            style={styles.camera}
            type={Camera.Constants.Type.back}
            focusable={true}
            ratio={cameraRatio}
            onCameraReady={handleCameraReady}
            onBarCodeScanned={handleBarcodeScanned}
            onMountError={handleThis}
        />
    )

    return (
        <View style={styles.container}>
            {
                (hasPermission) &&
                <Suspense>
                    {renderCamera}
                </Suspense>
                
            }
            <LinearGradient
                colors={['transparent', color.neutral80]}
                style={styles.gradient}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'black',
        alignItems: 'stretch'
    },
    camera: {
        flex: 1,
        backgroundColor: 'red',
    },
    gradient: {
        flex: 1,
        height: 220,
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0
    }
})

export default ScannerView;
4

0 回答 0