ReactNative实例 - BBC新闻客户端

欢迎Follow我的GitHub, 关注我的简书.

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

主要技术

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

本文源码的GitHub下载地址

关于React Native项目的启动, 参考1, 参考2.

配置项目

初始化项目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比较复杂, 不做过多介绍, 参考源码.

通过编写新闻类应用, 学习使用网络请求和解析HTML格式的文本. 多编码多思考, 不断学习, React Native是非常有意思的开发语言.

感谢我的朋友Joel Trew的实例, 本文改动一些源码.

OK, that's all! Enjoy it!