reference

• React-native image-crop-picker Official reference

Results show

preface

• The react-native image-crop picker component is used because it is more powerful. Built-in picture cutting, IOS end video compression.
• The current implementation can only select an image and return the information object of the image through a callback.
• Return a result instance:

{height: 388,
mime: "image/png",
modificationDate: "1626168615000",
path: "file:///data/user/0/com.idance_app/cache/react-native-image-crop-picker/333.png",
size: 399743}
Copy the code

The source code

/** * Select pictures, videos * 2021-7-13 */

import React, { useState } from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import { pxToDp } from '.. /.. /utils/stylesKits';
import Icon from 'react-native-vector-icons/FontAwesome5';
import ImagePicker from 'react-native-image-crop-picker';

interface Props {
  callBackImage: any;
  style: any;
}

const Index = (props: Props) = > {
  const [image, setImage] = useState({ path: ' ' });
  const [isShow, setIsShow] = useState(false);

  /** * Select picture */
  const pickImage = () = > {
    ImagePicker.openPicker({
      width: pxToDp(96),
      height: pxToDp(96),
      mediaType: 'photo'
    }).then((image) = > {
      setImage(image);
      setIsShow(true);
      props.callBackImage(image);
    });
  };

  const pickView = () = > {
    return (
      <TouchableOpacity
        style={{
          borderStyle: 'dashed',
          borderColor: 'black',
          width: pxToDp(96),
          height: pxToDp(96),
          borderWidth: 1.justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 0.1
        }}
        onPress={pickImage}
      >
        <Icon name="plus" size={30} color="#E8E8E8" />
      </TouchableOpacity>
    );
  };

  /** * Thumbnail display *@returns* /
  const thumbnailView = () = > {
    return (
      <View>
        <Image
          style={{ width: pxToDp(96), height: pxToDp(96), borderRadius: 10 }}
          source={{ uri: image.path}} / >
        <TouchableOpacity
          style={{ width: pxToDp(20), position: 'absolute', top: pxToDp(- 10), left: pxToDp(86)}}onPress={()= >{ setIsShow(! isShow); props.callBackImage(null); }} ><Image
            style={{ width: pxToDp(20), height: pxToDp(20)}}source={require('@ /res/images/x.png')} / >
        </TouchableOpacity>
      </View>
    );
  };

  return (
    <View style={[props.style, { width: pxToDp(110), height: pxToDp(110) }]}>
      {isShow ? thumbnailView() : pickView()}
    </View>
  );
};

Index.defaultProps = {
  callBackImage: () = > {},
  style: {}};export default Index;

Copy the code

Using the instance

// Callback method
  pickImage = (image: any) = > {
    console.log(image);
  };

// Use of components
<Pick
callBackImage={this.pickImage}
style={{ marginTop: pxToDp(20), marginLeft: pxToDp(15) }}
/>
Copy the code