神刀安全网

[译]React Native开源图片裁剪组件

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目: https://github.com/jiangqqlmj/js-coach-cn

开源项目地址: https://github.com/meznaric/react-native-image-cropping

项目介绍

react-native-image-cropping进行封装iOS平台上面第三方图片裁剪组件。该通过 siong1987/TOCropViewController 进行简单的React Native封装。

刚创建的React Native技术交流2群( 496601483 )欢迎各位大牛,React Native技术爱好者加入交流!

效果截图

[译]React Native开源图片裁剪组件

配置安装

当前只支持iOS平台

安装到项目
  1. 使用命令安装:npm install react-native-image-cropping –save
  2. XCode的项目导航中, 右击选中Libraries ➜ Add Files to [your project’s name]
  3. 选中node_modules 然后找到react-native-image-cropping ,添加到ReactNativeImageCropping.xcodeproj
  4. XCode中选中项目. 添加libReactNativeImageCropping.a 到你的项目的Build Phases ➜ Link Binary With Libraries
  5. 在项目导航中点击 ReactNativeImageCropping.xcodeprojand进入Build Settings标签. 确保当前是选中all标签,而不是basic. 查看一下Header Search Paths 并且确保当前配置为$(SRCROOT)/../react-native/React and $(SRCROOT)/../../React – mark both as recursive.
  6. 使用cmd+r或者直接运行项目
使用导入模块
const React = require('react-native'); const {ReactNativeImageCropping} = React.NativeModules;
进行图片裁剪

当前是使用RCTImageLoader进行裁剪图片同时可以React Native回调到怎么样加载显示图像

const originalImage = require('CrazyFlowers.jpg');  ReactNativeImageCropping     .cropImageWithUrl(originalImage.uri)     .then(image => {         //Image is saved in NSTemporaryDirectory!         //image = {uri, width, height}       },     err => console.log(b));

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » [译]React Native开源图片裁剪组件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮