http://blog.csdn.net/column/details/reactnative2016.html?&page=1
《React-Native系列》1、初探React-Native
《React-Native系列》2、RN与native交互与数据传递
《React-Native系列》3、RN与native交互之Callback、Promise
《React-Native系列》4、表单界面代码编写
《React-Native系列》5、RN实现弹出选择界面与动画效果
《React-Native系列》6、Navigator语法介绍及经典应用
《React-Native系列》7、bundle文件的加载和维护
《React-Native系列》8、RN如何打离线包
《React-Native系列》9、 Networking之fetch
《React-Native系列》10、 RN组件之Text和TextInput以及注意要点
《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
《React-Native系列》12、 API模块之PixelRatio和Dimensions
《React-Native系列》13、 组件封装之Dialog(iOS和Android通用)
《React-Native系列》14、 RN学习之NodeJS
《React-Native系列》15、 RN之可触摸组件
《React-Native系列》16、 RN组件之ListView
《React-Native系列》17、 RN中this所引起的undefined is not an object错误
《React-Native系列》18、 RN之定时器Timer
《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
《React-Native系列》20、 RN数据流之Flux概览
《React-Native系列》21、 解决RN在Android下不支持gif问题
《React-Native系列》22、 Flux框架Demo详解
《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
《React-Native系列》24、 结合Demo学习Redux框架
《React-Native系列》25、 详解Redux的connect方法
《React-Native系列》26、 ReactNative实现图片上传功能
《React-Native系列》27、 Redux的异步数据流
《React-Native系列》28、 RN之AsyncStorage
《React-Native系列》29、 RN组件之WebView
《React-Native系列》30、 RN组件间通信
《React-Native系列》31、 Fetch发送POST请求的坑与解决方案
《React-Native系列》32、 基于Fetch封装HTTPUtil工具类
《React-Native系列》33、 键盘遮挡问题处理
《React-Native系列》34、 ReactNative的那些坑
《React-Native系列》35、 RN在Android下支持gif的另一种方案
《React-Native系列》36、 ReactNative地图组件
《React-Native系列》37、 ReactNative百度地图开源组件使用
《React-Native系列》38、 ReactNative混合组件封装
《React-Native系列》39、 ReactNative之键盘Keyboard
《React-Native系列》40、 ReactNative之bundle文件瘦身
《React-Native系列》41、刨根问底Picker组件
《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView
《React-Native系列》43、通用容器和导航设计方案
《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化
《React-Native系列》45、踩坑记录
《React-Native系列》React-Native实战系列博客汇总
最近在项目中封装了个Dialog组件,iOS和Android平台上通用。
组件Dialog显示时,从页面顶部滑动到中间,点击确认或取消后,从页面底部划出页面,需要注意动画的实现。
源码如下:
如果需要使用该组件,只需要3步即可:
1、在你的页面import 组件,加入代码:
2、自定义回调方法callback,处理选中逻辑
3、调用show方法
备注:组件的样式可以根据你的需求修改,组件的动画也可以修改。
组件效果如下: