欢迎Follow我的GitHub: https://github.com/SpikeKing

关于React Native的实例,BBC新闻客户端. 通过访问BBC的公开网络接口,获取新闻内容,也可以根据类型显示. 在编写代码中,学习RN的知识,源码是使用ES6的规范编写,符合Facebook的RN代码最新规范.

主要技术

1. 访问网络请求,过滤内容,获取数据.
2. 显示多媒体页面,图片,视频,链接等.

本文源码的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={ <RefreshControl refreshing={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,掘金. 我已委托“维权骑士”为我的文章进行维权行动. 未经授权,禁止转载,授权或合作请留言.