安卓和ios实现ActionSheet

安卓和ios实现ActionSheet

image.png

这是安卓的效果,ios的效果同上。

在项目里用到react-native-image-picker。但是这个控件有自己的好处,也有不方便的地方,比如在选择相册的时候,无法实现图片的多选。在项目优化的时候,我放弃了这个组件,取而代之的是react-native-image-crop-picker。
这个组件可以实现打开相机和选择相册的方法。但是前提是,这样的modal需要自己去做,看了一下,网上很多都不是太好看,因此放弃了使用,自己来画。
类似上面这样的效果图。
只是我单独封装出来了。让ios和安卓实现一样的效果,

在这里,有一些属性。

属性 类型 默认值 备注
actionvisible string 用于显示或隐藏
text1 string 拍照
text2 string 选择相册
text3 string 取消

同样这里也有方法

方法 类型 默认值 备注
hideModal function 隐藏modal
functiontext1 function 文本1方法
functiontext2 function 文本2方法
closeAction function 文本3方法

example

<ActionModal 
    actionvisible={this.state.acitonvisible}
    hideModal={()=>{this.setState(actionvisible:false,)}}
    functiontext1={()=>{alert("function1")}}
    functiontext2={()=>{alert("function2")}}
    closeAction={()=>{alert("function3")}} //通常用于取消
/>

这样就可以实现安卓和ios同样的效果。
这里是地址,直接看源码,或者拷贝源码直接使用即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容