react-native IOS端原生组件封装步骤
2016-12-05 12:09
323 查看
最近使用react-native来做项目,感觉挺不错,官网已经封装了大部分组件,github上又有很多开源者贡献了自己的开源组件,感觉挺方便,但是每个项目中又会有不同风格的组件出现, 有可能是新功能,也许是改造别人的功能变成自己项目的风格,因此学习了下本地模块的封装,对于安卓来说,也许接触的时间比较长,封装比较简单也容易实现,对于ios,对于自己不是很熟悉,因此在此把封装步骤记录下来经供查阅。不用每次都度娘了。
第一步:创建个静态库
第二步:创建个react-native项目
第三步:在react-native的node_modules目录下创建此模块的名称,如:react-native-image-picker
第四步:在刚创建的目录下创建目录ios(创建node_modules下是为了方便引入头文件,在别人使用或者自己使用时不用修改头文件搜索地址,你也可以不用这样做)
第五步:打开react-native项目下的ios工程,把创建的模块下ios中的.xcodeproj拖到项目的libraries目录下
第六步:加入刚创建静态库的.a文件
第七步:在静态库下面设置header search paths为:$(SRCROOT)/../../react-native/React(如果你没在node_modules目录下创建,这里路径要改变)
第八步:编写代码
第一步:创建个静态库
第二步:创建个react-native项目
第三步:在react-native的node_modules目录下创建此模块的名称,如:react-native-image-picker
第四步:在刚创建的目录下创建目录ios(创建node_modules下是为了方便引入头文件,在别人使用或者自己使用时不用修改头文件搜索地址,你也可以不用这样做)
第五步:打开react-native项目下的ios工程,把创建的模块下ios中的.xcodeproj拖到项目的libraries目录下
第六步:加入刚创建静态库的.a文件
第七步:在静态库下面设置header search paths为:$(SRCROOT)/../../react-native/React(如果你没在node_modules目录下创建,这里路径要改变)
第八步:编写代码
相关文章推荐
- React-Native踩坑之路:react-native原生组件封装(iOS)
- react-native封装原生下拉刷新组件
- 【react-native-0.31-iOS】封装原生组件并调用(02)
- react-native iOS 原生组件 swift版
- react初探(二)之父子组件通信、封装公共组件
- React-redux开发之echarts组件封装
- React-Native与iOS原生的集成步骤
- React封装Fetch获取Api, 父组件与子组件的通讯
- react-native-navigation 原生路由组件的使用
- 可能是最in的React Native使用原生自定义下拉刷新组件
- React教程之封装一个Portal可复用组件的方法
- react-native自定义原生组件
- [置顶] 利用jquery和原生Js封装一个上传图片的组件
- 关于React-native里Android原生模块和组件的写法
- React-native 调用原生组件
- 《React-Native系列》38、 ReactNative混合组件封装
- React简单解释如何封装组件的demo
- 《React-Native系列》组件封装之Dialog(iOS和Android通用)
- React Js Simditor Textarea 富文本的组件封装