欢迎访问Ningto's博客

Menu
  • 首页
  • 归档
  • 关于
  • 书签
  • 必应壁纸
  • IT聚合
  • 工具
    • 我的工具列表
    • 我的网盘
    • 必应每日壁纸API
    • Html转Markdown
    • 仙尘光标
Menu

android app 微信热门文章精选

最后更新 2017-01-08 12:56:34   阅读量 2415

试用一下react native做了这个小软件,文章内容是用showapi获取的, 如果你喜欢或者对你有帮助给个star吧(github地址 apk下载地址)。

index.android.js


  1. render中使用navigator组件初始化articleList文章列表作为主页面;

    render() {
    const typeName = "热点";
    return (
        <Navigator
          ref={component => this._navigator = component}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={{
                LeftButton: this.initLeftButton.bind(this),
                RightButton: this.initRightButton.bind(this),
                Title: this.initTitle.bind(this),
              }}
              style={{margin:10}}
            />
          }
    
          initialRoute={{name: "articleList", component: ArticleList, params: {typeName: typeName}}}
          configureScene = {(route) => { return Navigator.SceneConfigs.FloatFromRight; }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} title={route.name}/>
          }}
          />
      );
    }
    
  2. 注册处理退出按键事件,两秒钟之内按两次Back键退出程序

    componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', this.handleBack);
    }
    
    componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBack);
    }
    
    _handleBack() {
    if (this._navigator && this._navigator.getCurrentRoutes().length > 1) {
      this._navigator.pop();
      return true;
    }
    // 两秒钟之内按两次Back键退出程序
    this.backPressTime.push(new Date());
    const count = this.backPressTime.length;
    if (count >= 2) {
      const ms = this.backPressTime[count - 1] - this.backPressTime[count - 2];
      this.backPressTime = [];
      if (ms <= 2000) {
        return false;
      }
    }
    ToastAndroid.show('再按一次退出程序', ToastAndroid.SHORT);
    return true;
    }
    

articleList.js


  1. 定义Article类显示每篇文章图片,标题,简介

    render() {
    return (
      <TouchableHighlight underlayColor='#c2c2c2' onPress={() => this.handleClick()}>
        <View style={styles.article}>
          <Image style={styles.image} source={{uri: this.props.contentImg}} />
          <View style={styles.right}>
            <View style={styles.rightTop}>
              <Text style={styles.userName}>{this.props.userName}</Text>
              <Text style={styles.date}>{this.getShowDate(this.props.date)}</Text>
            </View>
            <Text style={styles.title}>{this.props.title}</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
    }
    
  2. 使用ListView组件显示文章列表

    render() {
    return (
      <ListView
        ref={component => this._listView = component}
        style={{flex: 1, marginTop: 40}}
        dataSource={this.state.dataSource}
        enableEmptySections={true}
        onEndReached={this._onEndReached.bind(this)}
        onEndReachedThreshold={10}
        renderRow={(rowData) => {
          return (<View><Article {...rowData} /></View>)
        }}
      />
    
    );
    }
    
  3. updateArticleList获取文章列表数据

  4. _onEndReached加载更多文章

showArticle.js


使用WebView显示文章内容

export default class ShowArticle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
      return (
        <WebView style={{flex: 1, marginTop: 40}} source={{uri: this.props.url}} />
      );
    }
}

typeList.js


文章类别列表

  • 文章列表
    文章列表
  • 分类列表
    分类列表
  • 文章内容
    文章内容
(转载本站文章请注明作者和出处:泞途 - ningto.com)

下一篇 – mongoose分页查询
上一篇 – android app 笑话

  1. Mobile

toningto@outlook.com

推荐文章

Effective Python

Python的几种函数参数类型

标签云

Mac React Database Qt Node.js Javascript Product C/C++ Python Bug Tools Windows Linux Tips Design Go IOS MongoDB Shell Android Mobile Life Java Web MQ Others Boost

推广链接

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

多谢支持,用了好几年,服务很稳定支持多设备!

其他

文章RSS

Copyright © 2016 Welcome To Ningto Blog | 鄂ICP备17003086号-2