删除文章

确定要删除这篇文章吗?

取消
确定

android app 微信热门文章精选

     阅读(673)  2017-01-08 20:56:34

试用一下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


文章类别列表

  • 文章列表
    文章列表
  • 分类列表
    分类列表
  • 文章内容
    文章内容

文章评论

Keep it simple,stupid
文章数
292
总访问量
350339
今日访问
353
最近评论

xuehaoyun : 很不错,来围观一下
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
tujiaw : 还不错哦
回到顶部