Facebook-ComponentKit教程(一)准备工作

"ComponentKit "是一个非常强大的描述性UI框架,由于国内教程不多在这里简单做个教程,抛砖引玉,希望未来能有更好更全面的教程。

开始之前,因为ComponentKit不提供cocoaPod的方式引入工程,而是使用Carthage(迦太基)。这里是Carthage的教程。我们新建工程用Carthage将ComponentKit导入我们的Demo工程

*不要忘记将我们的ComponentKit.framework添加到Linked Frameworks and libraries 同时 Embadded Binaries。不然 要么找不到CompoentKit 要么程序闪退*

Facebook-ComponentKit教程(一)准备工作_第1张图片
导入framework
Facebook-ComponentKit教程(一)准备工作_第2张图片
目录


如果你的目录和我上面截图一样的话点击运行程序一个空白的应用就跑了起来,但是不出意外的话当你添加第一行代码

#import

之后无论真机还是模拟器,再次运行时你的应用程序就会报错


Facebook-ComponentKit教程(一)准备工作_第3张图片
报错

原因很简单(其实我找了一下午),就是ComponentKit使用ObjC++编写,而我们的Xcode编译时不会查找内部引用的C++库。要想找到那个的库就要把你刚刚import代码的那个.m文件改成 *.mm


Facebook-ComponentKit教程(一)准备工作_第4张图片
修改文件后缀

这时你的应用又能跑起来了,撒花。此时的环境配置已经完成,如果你动手能力强的话可以自己尝试写一些简单代码了,等我有时间会继续分享使用ComponentKit编写UI。


P.S. 附赠教程(源码调试,Xcode高手可以忽略):

因为导入的是framework,这对我们调试带来了极大的不便(我想断点,我想看源码!)。这时候Carthage的一个优点就出来了,打开工程目录:

Facebook-ComponentKit教程(一)准备工作_第5张图片
源码路径

看到没?直接把ComponentKit 和ComponentTextKit 源码拖到工程里(不要忘记移除之前导入的framework),这时可以源码调试了。

但但但是(太坑爹了,坑好多)!所有的源码包含头文件的时候都是

#import

就是这个这个 ,它代表的含义是查找“工程目录/ComponentKit/”路径下的*.h文件虽然通过Xcode 的Build Settings -> Header Search Paths可以解决。但这里有个小技巧,使用Xcode的查找功能

Facebook-ComponentKit教程(一)准备工作_第6张图片
使用正则表达式 查找

这段这则表达式的含义是捕获 以“”为结尾的字符串,替换成 "“捕获的字符串” " 这样Xcode就能找到当前工程下的所有头文件了。

对于正则表达式想进一步了解的朋友可以参阅这里。

以上,感谢。

你可能感兴趣的:(Facebook-ComponentKit教程(一)准备工作)