2

位于底部选项卡上的堆栈导航器包含 2 个屏幕。一个屏幕实现了 react-native-camera，另一个实现了模态。我试图使模态透明，但它失败了（它有一个白色的背景）。之所以发生这种情况，是因为安装和卸载我的相机组件的 useIsFocused 钩子。你对我如何解决这个问题有什么建议吗？

function Scanner(){
  return(
    <Scan.Navigator headerMode='none' mode='modal'
      screenOptions={{
        cardStyle: { backgroundColor: 'transparent'},
        cardOverlayEnabled: true,
      }} 
    >
      <Scan.Screen name='Camera' component={Camera}/>
      <Scan.Screen name='ValidationModal' component= {Validation} />
    </Scan.Navigator>
  )
}

Camera = ({navigation}) => {
    const [flash, setFlash] = React.useState(false)
   const isFocused = useIsFocused();


    const flashOn = ()=> {
        setFlash(prevFlash => !prevFlash)
    }

    barcodeRecognized = ({ barcodes }) => {
        barcodes.forEach(barcode => {

                const kappa = JSON.parse(barcode.data)
                navigation.navigate('ValidationMdal')

        })
    };

        if(isFocused){
            return(
                <RNCamera 
                    ref={ref => {
                        this.camera = ref;
                    }}
                    type={RNCamera.Constants.Type.back} 
                    captureAudio={false}
                    flashMode={flash?RNCamera.Constants.FlashMode.torch:RNCamera.Constants.FlashMode.off} 
                    androidCameraPermissionOptions={{
                        title: 'Permission to use camera',
                        message: 'We need your permission to use your camera',
                        buttonPositive: 'Ok',
                        buttonNegative: 'Cancel',
                        }}
                    style={{  flex: 1,width: '100%'}} 
                    onGoogleVisionBarcodesDetected={this.barcodeRecognized}>

                    <TouchableHighlight style={{position:'absolute', top:10, right:10, borderRadius:50, zIndex:100, backgroundColor:'rgba(255,255,255,0.7)'}} onPress={flashOn} >
                        <Image  source={flash?require("../../images/_Active.png"):require("../../images/_Idle.png")} />
                    </TouchableHighlight>
                </RNCamera>
            )
        }else if(!isFocused){
            return null
        }

}

Validation = ({navigation}) =>{

    return(
        <View style={styles.container}>
            <Image style={{flex:1}} source={require('../../green-tick.png')} resizeMode={'contain'} />
            <TouchableHighlight style={} title='Dismiss' onPress={()=>navigation.goBack()}>
                <Text>OK</Text>
            </TouchableHighlight>
        </View>
    )
}
4

0 回答 0