实现拍照和获取本地图片功能

最新推荐文章于 2025-03-17 21:14:00 发布

转载最新推荐文章于 2025-03-17 21:14:00 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunny-pei666/p/7349928.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用 React Native 实现的图片选择组件，该组件提供了从本地图库选择图片和拍照两种方式来获取图片的功能，并展示了如何通过 Expo 的 ImagePicker API 进行图片的选择与预览。

/* @flow */
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
  TouchableOpacity,
  Dimensions,
  TextInput,
  ToastAndroid,
} from 'react-native';
const ImageUrl='http://192.168.127.1:8080';
import ActionSheet from 'react-native-actionsheet';


const options = [ '取消', '本地图库', '拍照'];
const title = '请选择';
export default class SetView extends Component {
  constructor(props) {
     super(props)
     this.state = {
       selected: '',
       image:'',
     }
     this.handlePress = this.handlePress.bind(this)
     this.showActionSheet = this.showActionSheet.bind(this)
   }
   showActionSheet() {
     this.ActionSheet.show()
   }
   handlePress(i) {
    if(i == 1){
      console.log('本地图册');
      Expo.ImagePicker.launchImageLibraryAsync()
      .then((info)=>{
        this.setState({image:info.uri});
        this.settingUserImage();
      })
    }else if(i == 2){
      console.log('拍照');
      Expo.ImagePicker.launchCameraAsync()
      .then((info)=>{
        this.setState({image:info.uri});
      })
    }
  }
 
  render() {
      return (
        <View style={styles.container}>
          <ActionSheet
             ref={o => this.ActionSheet = o}
             title={title}
             options={options}
             cancelButtonIndex={0}
             destructiveButtonIndex={3}
             onPress={this.handlePress}
           />
        </View>
      );
    }
  }
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  });