美文网首页
React Native --- 一步一步完成新闻爬虫App(1

React Native --- 一步一步完成新闻爬虫App(1

作者: 不懂量化的吃货不是好前端 | 来源:发表于2017-07-25 15:37 被阅读0次

    所有代码托管在:https://github.com/liuxiaocong/cznews

    参照提交log学习效果更佳

    本期内容:初始框架搭建:React + React navigation + Redux , fetch功能调试,html内容解析尝试。

    这部分难点在于步骤3:react-native + redux 与 navigation框架的整合。

    (1)初始化react-native项目

           参照:https://facebook.github.io/react-native/docs/getting-started.html,选择“Building Projects with Native Code”,照着步骤做一次,react-native 0.46版本后,新加了Expo工具,方面快速代码调试,但个人建议还是用旧的模式,便于更好理解创建原生app的整个流程。使用react和react-natvie版本如下:

    "react":"16.0.0-alpha.12",

    "react-native":"0.46.4",

    创建完成后,我们对项目目录进行一点修改,在根目录下创建js文件夹,用于专门存放js相关的代码。在js下新建App.js,加入以下代码:

    同时修改index.ios.js和index.android.js,让入口文件都加载app模块,代码如下:

    第一步到此结束,此时在terminal下运行react-natvie run-ios,看到的界面为:

    (2)加入React navigation

    React navigation主要用于管理和实现页面跳转,配置顶部action bar,和tab布局,官方网址:https://reactnavigation.org。之前也用过其他导航库,比如大名鼎鼎的react-native-router-flux ,但说实话没有一个好用的,React navigation在ios和android下的表现也有很多不一致,主要应该是因为平台间activity的实现区别,但这个库目前已经被官方采纳,相比其他的明显有更大的优势,ui问题等我们后期完成得差不多再做调整,先以ios平台实现为主。

    相关文章

      网友评论

          本文标题:React Native --- 一步一步完成新闻爬虫App(1

          本文链接:https://www.haomeiwen.com/subject/nqnwkxtx.html