React Native 实例 - BBC新闻客户端
欢迎Follow我的GitHub: https://github.com/SpikeKing
关于React Native
的实例, BBC新闻客户端. 通过访问BBC的公开网络接口, 获取新闻内容, 也可以根据类型显示. 在编写代码中, 学习RN的知识, 源码是使用ES6的规范编写, 符合Facebook的RN代码最新规范.
主要技术
- 访问网络请求, 过滤内容, 获取数据.
- 显示多媒体页面, 图片, 视频, 链接等.
本文源码的GitHub下载地址
配置项目
初始化项目WclBBCNews, 修改package.json
, 添加依赖库.
Html解析库: htmlparser
, 时间处理库: moment
, 线性梯度库: react-native-linear-gradient
, 视频库: react-native-video
.
"dependencies": {"react": "^0.14.8","react-native": "^0.24.1","htmlparser": "^1.7.7","moment": "^2.11.1","react-native-linear-gradient": "^1.4.0","react-native-video": "^0.6.1"}
目前, React Native禁止使用
-
初始化项目名称, 最好使用驼峰式.
初始化主模块index.ios.js
, 使用NavigatorIOS
导航页面, 首页组件Feed模块.
render() {return (<NavigatorIOS
style={{flex:1}}translucent={false}barTintColor={'#BB1919'}titleTextColor={'white'}tintColor={'white'}initialRoute={{component: Feed,title: "Feed",passProps: {}}}/>);
}
渲染使用动态加载组件, StatusBar使用浅色样式.
_renderScene(route, navigator) {var Component = route.component;StatusBar.setBarStyle('light-content');return (<Component
{...route.props}changeNavBarHeight={this.changeNavBarHeight}navigator={navigator}route={route}/>);
}
StatusBar样式只有两种, 默认
default
, 字是黑色; 可选light-content
, 字是白色.
新闻列表
Feed页面, 主要以列表形式, 即ListView
标签, 显示新闻. 未加载完成时, 调用页面加载提示符ActivityIndicatorIOS
, 显示动画.
render() {// 未加载完成时, 调用加载页面if (!this.state.loaded) {return this._renderLoading();}// ...
}_renderLoading() {return (<View style={{flexDirection: 'row', justifyContent: 'center', flex: 1}}><ActivityIndicatorIOS
animating={this.state.isAnimating}style={{height: 80}}size="large"/></View>);
}
加载完成后, 调用ListView
显示页面, renderRow
渲染每一行, refreshControl
加载页面的过场.
return (<ListView
testID={"Feed Screen"}dataSource={this.state.dataSource}renderRow={this._renderStories.bind(this)}style={{backgroundColor: '#eee'}}contentInset={{top:0, left:0, bottom: 64, right: 0}}scrollEventThrottle={200}{...this.props}refreshControl={<RefreshControlrefreshing={this.state.isRefreshing}onRefresh={this._fetchData.bind(this)}tintColor='#BB1919'title="Loading..."progressBackgroundColor="#FFFF00"/>}/>
);
每一行使用Story
模块渲染.
_renderStories(story) {return (<Story story={story} navigator={this.props.navigator}/>);
}
启动页面的时候, 使用fetch
方法加载数据.
componentDidMount() {this._fetchData();
}
通过访问BBC的网络请求, 异步获取数据. 使用_filterNews
过滤需要的数据, 把数据设置入每一行, 修改状态setState
, 重新渲染页面.
_fetchData() {this.setState({isRefreshing: true});fetch(`http://trevor-producer-cdn.api.bbci.co.uk/content${this.props.collection || '/cps/news/world'}`).then((response) => response.json()).then((responseData) => this._filterNews(responseData.relations)).then((newItems) => {this.setState({dataSource: this.state.dataSource.cloneWithRows(newItems),loaded: true,isRefreshing: false,isAnimating: false})}).done();
}
列表项提供分类显示功能, 点击类别, 可以重新加载所选类型的新闻, 把Feed
页面再次添加至导航navigator
, 即页面栈.
_pressedCollection(collection) {this.props.navigator.push({component: Feed,title: collection.content.name,passProps: {collection: collection.content.id,navigator: this.props.navigator}});
}
点击列表项, 跳转至详情页面StoryDetail
.
_pressedStory(story) {this.props.navigator.push({component: StoryDetail,title: this._truncateTitle(story.content.name),passProps: {story, navigator: this.props.navigator}});
}
新闻详情
主要是解析HTML页面, 加载并显示, 除了文字之外, 会显示图片\视频\超链接等样式. 渲染使用动态元素, 状态state
的elements
属性.
render() {if (this.state.loading) {return (<Text>Loading</Text>);}return this.state.elements;
}
页面启动时, 加载数据. 在_fetchStoryData
方法中, 进行处理, 使用回调返回数据. 主要内容body
与多媒体media
通过滚动视图ScrollView
的形式显示出来.
componentDidMount() {this._fetchStoryData(// media表示视频或图片.(result, media) => {const rootElement = result.find(item => {return item.name === 'body';});XMLToReactMap.createReactElementsWithXMLRoot(rootElement, media).then(array => {var scroll = React.createElement(ScrollView, {contentInset: {top: 0, left: 0, bottom: 64, right: 0},style: {flex: 1, flexDirection: 'column', backgroundColor: 'white'},accessibilityLabel: "Story Detail"}, array);this.setState({loading: false, elements: scroll});});});
}
处理数据, 使用fetch
方法, 分离视频与图片, 还有页面, 通过回调cb(callback)
的处理返回数据.
_fetchStoryData(cb) {// 提取数据, 转换JSON格式, 图片过滤, 视频过滤, 组合relations, 解析.fetch(`http://trevor-producer-cdn.api.bbci.co.uk/content${this.props.story.content.id}`).then((response) => response.json()).then((responseData) => {const images = responseData.relations.filter(item => {return item.primaryType === 'bbc.mobile.news.image';});const videos = responseData.relations.filter(item => {return item.primaryType === 'bbc.mobile.news.video';});const relations = {images, videos};this._parseXMLBody(responseData.body, (result) => {cb(result, relations);});}).done();
}
使用Tautologistics
解析dom
数据与body
数据. DOM, 即Document Object Model, 文件对象模型.
_parseXMLBody(body, cb) {var handler = new Tautologistics.NodeHtmlParser.DefaultHandler(function (error, dom) {cb(dom)}, {enforceEmptyTags: false, ignoreWhitespace: true});var parser = new Tautologistics.NodeHtmlParser.Parser(handler);parser.parseComplete(body);
}
XML解析类XMLToReactMap
比较复杂, 不做过多介绍, 参考源码.
感谢我的朋友Joel Trew的实例, 本文改动一些源码.
通过编写新闻类应用, 学习使用网络请求和解析HTML格式的文本. 多编码多思考, 不断学习, React Native
是非常有意思的开发语言.
OK, that’s all! Enjoy it!
最初发布地址:
http://www.wangchenlong.org/2016/05/07/1605/071-rn-bbc-news/
欢迎Follow我的GitHub, 关注我的简书, CSDN, 掘金.
我已委托“维权骑士”为我的文章进行维权行动. 未经授权, 禁止转载, 授权或合作请留言.
React Native 实例 - BBC新闻客户端相关推荐
- react native开发的新闻客户端
前言 这个是去年的项目了,当时要开发一个新闻头条客户端,后来各种原因项目就停了,这个客户端已经开发了一大半了,现在开源出来,大家一起学习借鉴讨论. 项目运行 注意:由于项目是去年的,可能现在跑有些插件 ...
- React Native实例之房产搜索APP
React Native 开发越来越火了,web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学 ...
- React Native实例
本文主要包括以下内容 View组件的实例 Text组件实例 Navigator组件实例 TextInput组件实例 View组件的实例 效果如下 代码如下 /*** Sample React Nati ...
- React Native在美团外卖客户端的实践
MRN简介 MRN(Meituan React Native) 是基于开源的React Native框架改造并完善而成的一套动态化方案,在开发体验上基本能与原生RN保持一致,同时从业务需求的角度满足从 ...
- React Native在美团外卖客户端的实践,已有千人收藏
最下层是Android/iOS系统服务层,因为MRN是跨端的,所以需要引入这一层.相对单一平台来说,由于MRN的引入,整个App的架构不可避免地需要考虑Android和iOS平台本身的差异性. 倒数第 ...
- React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
最新文章
- 获得AndroidManifest.xml文件中meta-data的value值
- neo4j CQL语句
- (*长期更新)软考网络工程师学习笔记——Section 8 传输层
- poj3083Children of the Candy Corn(dfs+bfs)
- J.U.C并发框架源码阅读(二)AbstractQueuedSynchronizer
- 程序设计中为什么要解耦?
- RStudio 下载R包的几种方法
- php网站开发实例教程源码,PHP+MYSQL网站开发全程实例
- csrss.exe病毒查杀
- HDU-1869 六度分离 (矩阵的幂运算求通路个数)
- 使用阿里云实现简单的直播
- HTML5编写百度搜索网页,零基础打造一款属于自己的网页搜索引擎
- 笔记本连接WiFi后浏览器不能上网,但是连接手机热点就可以。问题解决!!!
- 钓鱼网站套路深,上网须谨慎
- 数据库系统概论第五版(理论总结)
- 【编程方法】如何阅读开源代码
- Python turtle绘制五角星
- 三种平摊分析的方法分别为_算法 平摊分析
- 上期所API头文件三、ThostFtdcMdApi.h---行情相关组件的定义(源代码6.3.19版)
- 2013年最具吸引力的十大科技
热门文章
- T100自定义应用使用说明(azzi650)
- 后缀数组(未完待续)
- Golang使用go.mod配置加载本地模块
- 二分图大讲堂——彻底搞定最大匹配数(最小覆盖数)、最大独立数、最小路径覆盖、带权最优匹配
- VMware Workstation Pro v16.1.2 官方正式版
- 2014年24段魔尺变球视频教程(升级版)
- 异步电机(感应电机)模型预测电流控制仿真模型,框架为双闭环矢量控制,电流环为模型预测电流控制器
- 重要通知|Strata Data Conference北京站最优惠票价今天截止。
- python计算汽车的平均油耗_拒绝“欢乐表”,教你一招准确计算爱车平均油耗
- Python控制Linux(OrangePi 香橙派) GPIO (wiringOP + OPi.GPIO)