React-Native图片剪裁react-native-image-crop-picker

使用 react-native-image-crop-picker

图片裁切组件

1. 安装

   yarn add  react-native-image-crop-picker 
   

2. 使用

   import ImagePicker from 'react-native-image-crop-picker';
    
   const image = await ImagePicker.openPicker({
     // 选择完图片之后将要被裁剪的宽和高
     width: 300,
     height: 400,
     // 要不要开启裁剪功能
     cropping: true
   });
   
   // 返回图片的路径是file:///storage/emulated/0/Android/data/com
   // <Image source={{ uri: image.path }} style={{ width: "60%", height: "60%"}}>
   

3. 实现图片的上传

---

teaset-overlay

• 遮罩层，有显示和关闭功能
• 案例（全透明模态悬浮框）：

import { Overlay } from "teaset";

// 代表遮罩层对象，可以使遮罩层显示和隐藏
let overlayViewRef = null;
let overlayView = (
  <Overlay.View
    // 遮罩层的样式
    style={{alignItems: 'center', justifyContent: 'center'}}
    modal={true}
    overlayOpacity={0}
    ref={v => overlayViewRef = v}
  >
    {/* 遮罩层的里面的内容 */}
    <View
      style={{
        backgroundColor: '#333',
        padding: 40,
        borderRadius: 15,
        alignItems: 'center',
      }}>
      ...
    </View>
  </Overlay.View>
);
// 显示遮罩层
Overlay.show(overlayView);
// 关闭遮罩层
overlayViewRef.close();