React Native 中Android实现ImagePicker

这几天在做React Native 图片相关,记录一下

操作步骤:
1.在项目中导入react-native-image-picker包
npm install react-native-image-picker@latest --save
2.需要修改项目中Android目录下的类容
<1>修改Android目录下的setting.gradle,添加

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-image-picker/android')

<2>在Android/app下的build.gradle的dependencies中添加

compile project(':react-native-image-picker')

<3>修改app/src/java/com/demo/MainApplication.java中的getPackages()中添加

new ImagePickerPackage()

如下

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),new ImagePickerPackage()
      );
    }

3.在React Native 中的js文件中导入ImagePicker

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

4.使用:

import React from 'react';
import {
  AppRegistry,StyleSheet,Text,View,PixelRatio,TouchableOpacity,Image,} from 'react-native';

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

export default class App extends React.Component {

  state = {
    avatarSource: null,videoSource: null
  };

  selectPhotoTapped() {
    const options = {
      quality: 1.0,maxWidth: 500,maxHeight: 500,storageOptions: {
        skipBackup: true
      }
    };

    ImagePicker.showImagePicker(options,(response) => {
      console.log('Response = ',response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ',response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ',response.customButton);
      }
      else {
        let source = { uri: response.uri };
        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        this.setState({
          avatarSource: source
        });
      }
    });
  }

  selectVideoTapped() {
    const options = {
      title: 'Video Picker',takePhotoButtonTitle: 'Take Video...',mediaType: 'video',videoQuality: 'medium'
    };

    ImagePicker.showImagePicker(options,response);

      if (response.didCancel) {
        console.log('User cancelled video picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ',response.customButton);
      }
      else {
        this.setState({
          videoSource: response.uri
        });
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
          <View style={[styles.avatar,styles.avatarContainer,{marginBottom: 20}]}>
          { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
            <Image style={styles.avatar} source={this.state.avatarSource} />
          }
          </View>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
          <View style={[styles.avatar,styles.avatarContainer]}>
            <Text>Select a Video</Text>
          </View>
        </TouchableOpacity>

        { this.state.videoSource &&
          <Text style={{margin: 8,textAlign: 'center'}}>{this.state.videoSource}</Text>
        }
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'
  },avatarContainer: {
    borderColor: '#9B9B9B',borderWidth: 1 / PixelRatio.get(),alignItems: 'center'
  },avatar: {
    borderRadius: 75,width: 150,height: 150
  }
});

以上代码引用自
链接ImagePicker官网
https://github.com/react-comm...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!