在 React Native 中,如何访问本机相机应用程序?
In React Native how can I access the native camera app?
我想在我的应用程序中添加一个 link 来打开 phone 的原生相机应用程序吗?这可能吗?
我知道 react-native-camera 存在,但从文档来看它似乎只支持访问相机以在您的应用程序中创建您自己的相机界面。我宁愿只使用 phone.
上已有的相机应用程序
谢谢
使用react-native-image-picker,可以访问phone本机的相机。
[编辑]
示例代码
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Button
} from 'react-native';
import ImagePicker from "react-native-image-picker";
export default class App extends Component {
state = {
pickedImage: null
}
reset = () => {
this.setState({
pickedImage: null
});
}
pickImageHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image",
maxWidth: 800, maxHeight: 600}, res => {
if (res.didCancel) {
console.log("User cancelled!");
} else if (res.error) {
console.log("Error", res.error);
} else {
this.setState({
pickedImage: { uri: res.uri }
});
}
});
}
resetHandler = () =>{
this.reset();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Pick Image From Camera and Gallery</Text>
<View style={styles.placeholder}>
<Image source={this.state.pickedImage} style={styles.previewImage} />
</View>
<View style={styles.button}>
<Button title="Pick Image" onPress={this.pickImageHandler} />
<Button title="Reset" onPress={this.resetHandler} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems:"center"
},
textStyle: {
fontWeight:"bold",
fontSize:30,
textAlign:"center",
color:"red",
marginTop:10
},
placeholder: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "#eee",
width: "70%",
height: 280,
marginTop:50,
},
button: {
width: "80%",
marginTop:20,
flexDirection:"row",
justifyContent: "space-around"
},
previewImage: {
width: "100%",
height: "100%"
}
});
}
我想在我的应用程序中添加一个 link 来打开 phone 的原生相机应用程序吗?这可能吗?
我知道 react-native-camera 存在,但从文档来看它似乎只支持访问相机以在您的应用程序中创建您自己的相机界面。我宁愿只使用 phone.
上已有的相机应用程序谢谢
使用react-native-image-picker,可以访问phone本机的相机。
[编辑] 示例代码
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Button
} from 'react-native';
import ImagePicker from "react-native-image-picker";
export default class App extends Component {
state = {
pickedImage: null
}
reset = () => {
this.setState({
pickedImage: null
});
}
pickImageHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image",
maxWidth: 800, maxHeight: 600}, res => {
if (res.didCancel) {
console.log("User cancelled!");
} else if (res.error) {
console.log("Error", res.error);
} else {
this.setState({
pickedImage: { uri: res.uri }
});
}
});
}
resetHandler = () =>{
this.reset();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Pick Image From Camera and Gallery</Text>
<View style={styles.placeholder}>
<Image source={this.state.pickedImage} style={styles.previewImage} />
</View>
<View style={styles.button}>
<Button title="Pick Image" onPress={this.pickImageHandler} />
<Button title="Reset" onPress={this.resetHandler} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems:"center"
},
textStyle: {
fontWeight:"bold",
fontSize:30,
textAlign:"center",
color:"red",
marginTop:10
},
placeholder: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "#eee",
width: "70%",
height: 280,
marginTop:50,
},
button: {
width: "80%",
marginTop:20,
flexDirection:"row",
justifyContent: "space-around"
},
previewImage: {
width: "100%",
height: "100%"
}
});
}