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

尹承泽
2023-12-01

使用 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();
 类似资料: