sdcxtech / react-native-troika

Native UI Component for React Native, including nested-scroll, pull-to-refresh, bottom-sheet, etc.
https://todoit.tech
167 stars 23 forks source link

关于image-crop的使用问题,希望能和作者探讨一下 #2

Open chj-damon opened 1 year ago

chj-damon commented 1 year ago

首先非常感谢作者提供的这个组件。但是在实际使用中遇到一些问题,想和作者探讨一下:

  1. 我看demo里面关于image-crop的使用,是先在screenA拿到一个uri传递给screenB, 在screenB里面就一个 组件,然后在裁切后跳转到Result页面,整个流程显得有点过于麻烦了。

  2. 我在项目中想要在同一个Screen使用的时候,uri是通过ImagePicker选择出来的,也就意味着一开始的时候uri是空的,如果直接写成:

    <ImageCropView uri={uri} {...other} />

    会导致应用崩溃。需要改成:

    {!!uri && <ImageCropView uri={uri} {...other} />}

    是否可以在ImageCropView内部对uri进行一下处理?

  3. 按照上面的写法在同一个页面里使用ImageCropView组件的时候,它并不是全屏覆盖在当前其他组件上的,而是排在其他组件下面。就看起来不太像是要进行裁切操作的样子。有两种办法:要么我把它放在一个弹窗里面(但是这样的话就跟我想要在同一个Screen操作的初衷违背了);要么ImageCropView是否可以默认以弹窗的形式进行展示(增加一个prop控制?)

  4. 我设想的ImageCropView是否可以通过提供.show() / .hide()的方法来在一些方法内部通过ref的方式唤起裁切组件?比如在ImagePicker选好图片后,在它的callback里面通过imageCropViewRef.current.show()打开裁切组件进行裁切,然后在点击完成的时候调用:

    await imageCropViewRef.current.crop();
    imageCropViewRef.current.hide();

    来关闭组件。

vibexie commented 1 year ago

已收到你的建议

  1. demo确实如你所描述的,有A,B,C三个页面,A页面只是提供选择图片入口,C页面只是展示裁剪后的页面,我们需要关注的点只有B页面里面的ImageCropView,因为我们ImageCropView的初衷就是只提供一个view给大家使用,不做更多的封装,这样使用者才有最大的自由度,所以说这个view是放在某个页面还是某个弹窗里面,是由开发者自行决定和设计的;
  2. 后续会修复这个bug;
  3. 同1;
  4. 目前已提供了crop方法,imageCropViewRef.current.crop(),文档会补充一下,裁剪成功后的图片uri会在onCrop属性回调。