原 android app 微信热门文章精选

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

文章类别列表

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