因为最近工作的原因,对app开发产生了浓烈的兴趣,但是感觉直接学习一门开发语言,构建个app也不知道要猴年马月了。前端时间也一直在看react,对react产生了好感,便一发不可收拾,看了阮老师的react入门教材,就想寻思着,耶,既然有了兵器了,咋们也去打打怪,长长见识,便有一种想要用react干项目的冲动。正巧了,app+react = react-native,这么一琢磨,得了,就用react-native做一个app吧,这多有意思,用js来干一个app,想想整个人都是非常的急冻,霍霍,说干就干。干点啥呢,平时喜欢看NBA,就直接做一个和篮球相关的吧。
好了,言归正传,首先要做react-native开发。必须要做好准备,首先要让xcode更新以下版本(具体是最近最好,因为我对ios也了解不深入,害怕用不了)。然后就是最重要的nodejs。在官网https://nodejs.org/en/下载nodejs版本(推荐下载LTS,相对来说更新幅度不会那么快)。然后按照以下步骤来完成react-native项目的环境搭建:
(1)建议安装watchman,终端命令:brew install watchman
(2)安装flow:brew install flow
这两个步骤是完成react-native的依赖。现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
(1)安装命令行工具:sudo npm install -g react-native-cli
(2)创建一个空项目:react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。
接下来我们来看一下我们项目news的结构目录。
文件img是专门来放置图片的。
文件server是一个专门提供数据的后台服务器,这里是用nodejs的express来搭建的,这里要多说几句,要感谢虎扑给我们提供了这么多的数据源。关于server爬虫的有关内容我们放在后面来说。
文件views是放置我们项目的组件。因为众所周知,react的核心思想中的一个,就是用组件来可复用的开发,我非常喜欢这种方式,并且在写这个项目的时候,也慢慢领会到组件开发的好处。
文件config是一个配置app和服务器参数的文件。
文件index.ios.js是项目的主入口,相当于就是java或c中的main.
文件util.js是用作app中的一些工具类或者函数的存放地。
下一章,我们来讲一讲server后台提供数据。
项目地址:https://github.com/strongwray...