用react-native开发一个IOS NBA资讯app(一) ----构建基本项目(持

因为最近工作的原因，对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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!