Javascript 使用按钮触发React Native中的摄像头模块？

我正试图找出在iOS React本机应用程序上触发摄像头模块的方法。 我一直在使用一个自定义组件为一个按钮编写代码，我希望该按钮触发相机界面

但我很难理解实现这一目标需要什么

这就是我到目前为止所做的：

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import TakePhoto from './TakePhoto';
import CameraRoll from './CameraRoll';

const PhotoOptions = () => {

    const handleCameraPress = () => {
        console.log("Trigger camera");
    }

    return(
        <View style={styles.container}>
            <Text style={styles.label}>Välj en passande bild (valfritt)</Text>
            <View style={styles.columns}>
                <TakePhoto onPress={handleCameraPress} />
                <CameraRoll />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        borderWidth: 1,
        borderColor: 'red',
        marginBottom: 20,
        paddingBottom: 250
    },
    label: {
        marginBottom: 8
    },
    columns: {
        display: 'flex',
        flexDirection: 'row',
        // flex: 1
    }
});

export default PhotoOptions;

从“React”导入React；
从“react native”导入{View，StyleSheet，Text}；
从“/TakePhoto”导入拍摄照片；
从“/CameraRoll”导入CameraRoll；
常量照片选项=（）=>{
常量handleCameraPress=（）=>{
控制台日志（“触发照相机”）；
}
返回(
Välj en passande bild（瓦尔弗里特）
)
}
const styles=StyleSheet.create({
容器：{
边框宽度：1，
边框颜色：“红色”，
marginBottom:20，
垫底：250
},
标签：{
marginBottom:8
},
栏目：{
显示：“flex”，
flexDirection:'行'，
//弹性：1
}
});
导出默认选项；

您可以使用来触发相机

通过安装react本机映像选择器

yarn add react-native-image-picker

示例代码：

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});

---

正如我所看到的，您也在尝试访问用于图片和其他内容的相机卷，您可以使用这个库来实现这一点

用法：

import CameraRoll from "@react-native-community/cameraroll";

CameraRoll.getAlbums(params);

CameraRoll.getPhotos(params);

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <Button title="Load Images" onPress={this._handleButtonPress} />
     <ScrollView>
       {this.state.photos.map((p, i) => {
       return (
         <Image
           key={i}
           style={{
             width: 300,
             height: 100,
           }}
           source={{ uri: p.node.image.uri }}
         />
       );
     })}
     </ScrollView>
   </View>
 );
}

---

你能添加TakePhoto.js和CameraRoll.js的代码吗？@MuhammadNuman将TakePhoto和CameraRoll视为简单的组件，只是自定义按钮。那你为什么不使用呢？我不知道有一个模块可以做到这一点。非常感谢。不过，如果有人能告诉我怎么做，我将不胜感激。谢谢Stank你，我会试试的我还没有试过，但看起来它正在做我需要的事情谢谢你，你有没有选择react native image picker

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});


// Launch Camera:
ImagePicker.launchCamera(options, (response) => {
  // Same code as in above section!
});

// Open Image Library:
ImagePicker.launchImageLibrary(options, (response) => {
  // Same code as in above section!
});