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

发布时间:2019-06-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了用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的结构目录。

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

文件img是专门来放置图片的。
文件server是一个专门提供数据的后台服务器,这里是用nodejs的exPress来搭建的,这里要多说几句,要感谢虎扑给我们提供了这么多的数据。关于server爬虫的有关内容我们放在后面来说。
文件views是放置我们项目的组件。因为众所周知,react的核心思想中的一个,就是用组件来可复用的开发,我非常喜欢这种方式,并且在写这个项目的时候,也慢慢领会到组件开发的好处。
文件config是一个配置app和服务器参数的文件。
文件index.ios.js是项目的主入口,相当于就是java或c中的main.
文件util.js是用作app中的一些工具类或者函数的存放地。

下一章,我们来讲一讲server后台提供数据。
项目地址:https://github.com/strongwray...

脚本宝典总结

以上是脚本宝典为你收集整理的用react-native开发一个IOS NBA资讯app(一) ----构建基本项目(持续更新)全部内容,希望文章能够帮你解决用react-native开发一个IOS NBA资讯app(一) ----构建基本项目(持续更新)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。