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

Posted 2020-10-02

/* @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,
    },
  });

 

import ActionSheet from‘react-native-actionsheet‘;