试用一下react native做了这个小软件,文章内容是用showapi获取的, 如果你喜欢或者对你有帮助给个star吧(github地址 apk下载地址)。
index.android.js
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}/> }} /> ); }
注册处理退出按键事件,两秒钟之内按两次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
定义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> ); }
使用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>) }} /> ); }
updateArticleList获取文章列表数据
_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
文章类别列表
- 文章列表
- 分类列表
- 文章内容