takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true, mirrorImage: true };
const data = await this.camera.takePictureAsync(options)
this.setState({path: data.uri})
}
}
takePicture 是捕获图像的函数。现在我想保存捕获的图像并将其上传到 Firebase 存储。
this.setState({path: data.uri}) 更新单击图像位置的路径。
如何使用 React Native fetch Blob 将图像上传到 Firebase 存储中？请帮忙
我目前正在使用react-native-camera - ^1.6.3 和 firebase - ^5.0.3
你好，我是 React Native 的新手，我只是在没有博览会的情况下用相机构建了我的第一个 React Native 项目。我安装了它，npm install react-native-camera然后将它与react-native link react-native-camera. 相机运行成功，但是当我触发捕捉按钮时，它出现了这样的错误....
{ [TypeError: camera.takePictureAsync 不是一个函数。（在“camera.takePictureAsync(options)”中，“camera.takePictureAsync”未定义）] ? 线路：131480，？列：72，？sourceURL: ' http://localhost:8081/index.bundle?platform=android&dev=true&minify=false ' }
这是我的代码看起来像......
import React, { useRef } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { RNCamera } from 'react-native-camera'
function PlayWithCamera() {
const camera = useRef(null)
const takePicture = async () => {
try {
const options = { quality: 0.5, base64: true };
const data = await camera.takePictureAsync(options);
console.log(data.uri, …我只需要拍摄并存储一张照片。我正在使用react-native-vision-camera，但是当我拍照时，使用.takePhoto()方法。它冻结了。
我还使用“质量优先级：“速度”。
我正在 Android 模拟器上测试它。
const CameraPage = () => {
const devices = useCameraDevices()
const device = devices.back
const isFocused = useIsFocused()
const camera = useRef(null)
const onPressButton = async () => {
console.log(camera.current)
console.log(123)
const photo = await camera.current.takePhoto({
flash: 'off',
qualityPrioritization: "speed"
})
console.log(photo)
}
if (device == null) return <View><Text>Loading</Text></View>
return (
<View style={{flex: 1}}>
<Camera
ref={camera}
style={StyleSheet.absoluteFill}
device={device}
isActive={isFocused}
photo={true}
/>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.camButton}
onPress={onPressButton}
>
<Text>Click me</Text>
</TouchableOpacity>
</View>
</View>
)
我要做的就是将使用react-native-camera拍摄的照片上传到带有react-native-fetch-blob的Firebase存储中，但是无论如何都不会发生。
我浏览了所有可以找到的文档，但似乎没有任何效果。
如果有人拥有完成此任务的工作系统，请将其发布为答案。我可以获取react-native-camera返回的jpg的uri（它显示在ImageView和所有内容中），但是当需要放置Blob时，我的上传功能似乎停止工作。
我当前的功能：
uploadImage = (uri, imageName, mime = 'image/jpg') => {
return new Promise((resolve, reject) => {
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
let uploadBlob = null
const imageRef = firebase.storage().ref('selfies').child(imageName)
console.log("uploadUri",uploadUri)
fs.readFile(uploadUri, 'base64').then((data) => {
console.log("MADE DATA")
var blobEvent = new Blob(data, 'image/jpg;base64')
var blob = null
blobEvent.onCreated(genBlob => {
console.log("CREATED BLOB EVENT")
blob = genBlob
firebase.storage().ref('selfies').child(imageName).put(blob).then(function(snapshot) {
console.log('Uploaded a blob or file!');
firebase.database().ref("selfies/" + firebase.auth().currentUser.uid).set(0)
var updates = {};
updates["/users/" + …javascript blob react-native react-native-camera react-native-fetch-blob
应用启动后，我获得了用户使用相机的许可。但是在打开摄像头之前，如果我检查用户是否已授予摄像头许可，即使允许，我也会得到响应为“ false”。
这是我的代码：
PermissionsAndroid.check('camera').then(response => {
if (response === true){
//Open scanner
}
else if (response === false){
Alert("Please enable camera permission in device settings.")
}
})
android android-camera react-native react-native-camera react-native-android
使用react-native-camera（RNCamera），当预览是窗口的全宽且完整预览可见时，我正在努力将相机预览的高度设置为正确。此问题假设设备始终处于纵向模式。
我的代码如下：
import React, { Component } from "react";
import { Dimensions, Button, View } from "react-native";
import { RNCamera } from "react-native-camera";
export default class CameraScreen extends Component {
static navigationOptions = {
header: null
};
render() {
return (
<View>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={{
width: Dimensions.get("window").width,
height: 400 // <-- need to know what this value actually is
}}
type={RNCamera.Constants.Type.back}
/>
<Button
title="This button should appear directly below the camera preview" …实际上，我是 React 的新手，我正在尝试制作一个简单的条形码扫描仪，它在警报中显示扫描的条形码，在警报中按“确定”后，用户应该能够扫描另一个条形码。
问题是条形码会被连续扫描，当警报出现时，它会隐藏并每秒显示一次警报。
我试图做这样的事情来只显示一次警报，如果按下 OK 能够再次显示警报，但只有在按下 OK 但没有效果的情况下..
onBarCodeRead = (e) => {
if(!this.alertPresent){
this.alertPresent = true;
Alert.alert(
"Barcode type is " + e.type,
"Barcode value is " + e.data,
[
{text: 'OK', onPress: () => this.alertPresent = false;},
],
{cancelable: false},
);
}
}
这是 Barcode.JS 的完整代码
import React, { Component } from 'react';
import { Button, Text, View,Alert } from 'react-native';
import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';
class ProductScanRNCamera extends Component {
constructor(props) …我正在尝试实现我的第一个 React Native UI 组件，我遵循了 Facebook 教程，这应该很容易，但我遇到了一些奇怪的问题
public class CameraViewManager extends SimpleViewManager<CameraPreview> {
public static final String REACT_CLASS = "RCTCameraView";
@Override
public String getName() {
return REACT_CLASS;
}
@Override
public CameraPreview createViewInstance(ThemedReactContext context) {
return new CameraPreview(context);
}
@ReactProp(name = "test")
public void setTest(CameraPreview view, @Nullable String test){
Log.i("TESTWD", test);
}
}
这是我正在使用的 ViewManager，对我来说似乎是正确的。第一个问题是android studio 找不到@ReactProp 并且无法编译。第二个问题是，如果我删除该方法，一切都会编译，但是当我使用这个组件时，什么都没有出现