当前位置: 代码迷 >> 综合 >> ReactNative手机端调用相册react-native-image-crop-picker
  详细解决方案

ReactNative手机端调用相册react-native-image-crop-picker

热度:60   发布时间:2023-11-26 00:49:02.0

react-native-image-crop-picker可以实现打开手机相册

查看官网https://github.com/ivpusic/react-native-image-crop-picker

import React from 'react';
import {SafeAreaView, TouchableOpacity, StyleSheet, Text, View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-crop-picker';
export default class NewMsgBac extends React.Component {goToPage(pageName, param) {if (param) {this.props.navigation.navigate(pageName, param);}this.props.navigation.navigate(pageName);}openPhoto(){ImagePicker.openPicker({width: 300,height: 400,cropping: true}).then(image => {console.log(image);});}render() {return (<SafeAreaView style={
   {flex:1,backgroundColor:'#F2F2F2'}}><TouchableOpacity onPress={() => this.goToPage('ChoiceImgLocal')}><View style={[Styles.itemView, {marginTop:10}]}><Text style={Styles.itemText}>选择背景图</Text><Icon style={
   {marginLeft: 5}} name="angle-right" size={25} color="#BBB"/></View></TouchableOpacity><TouchableOpacity  onPress={() => this.openPhoto()}><View style={[Styles.itemView, {marginTop:10}]}><Text style={Styles.itemText}>从手机相册选择</Text><Icon style={
   {marginLeft: 5}} name="angle-right" size={25} color="#BBB"/></View></TouchableOpacity><TouchableOpacity onPress={() => this.goToPage('ChoiceImgCamera')}><View style={[Styles.itemView]}><Text style={Styles.itemText}>拍一张</Text><Icon style={
   {marginLeft: 5}} name="angle-right" size={25} color="#BBB"/></View></TouchableOpacity></SafeAreaView>)}
}const Styles = StyleSheet.create({itemView: {flexDirection: 'row',alignItems: 'center',height: 50,paddingLeft: 15,paddingRight: 15,borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#ddd',backgroundColor: '#FFF',},itemText: {flex:1,flexWrap: "wrap-reverse",fontSize: 15,color:'#333'},
});

 

 

 

  相关解决方案