react-native-quan代码分析笔记

react-native-quan是一个基于react-native的android app，没有做 ios 导出，一个简单的新闻列表展示。程序版本： “react”: “15.3.1”,”react-native”: “0.32.0”。

首页 main/index.js

进入程序首页，作者使用react-native-update组件进行app热更新，使用jpush-react-native组件进行信息推送。

class Main extends Component {constructor(props) {super(props);this._onBackAndroid = this._onBackAndroid.bind(this);}componentWillMount() {BackAndroid.addEventListener('hardwareBackPress', this._onBackAndroid);// 热更新checkUpdate(appKey).then(info => {console.log(info);if (info.expired) {Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本');} else if (info.update) {this._doUpdate(info);}});//版本更新后第一次启动，启动成功则标记版本if (isFirstTime) {markSuccess();}}//热更新方法，参考react-native-update组件的API_doUpdate = info => {downloadUpdate(info).then(hash => {switchVersionLater(hash)}).catch(err => console.log('更新失败'))};//注册信息推送事件，参考jpush-react-native组件的APIcomponentDidMount() {JPush.requestPermissions();this.pushlisteners = [JPush.addEventListener(JpushEventReceiveMessage, this.onReceiveMessage.bind(this)),JPush.addEventListener(JpushEventOpenMessage, this.onOpenMessage.bind(this)),]}onReceiveMessage(message) {// console.log(message._data);}//点击推送后跳转到内容页onOpenMessage(message) {let navigator = this.refs.navigator;if (message._data['cn.jpush.android.EXTRA'] && JSON.parse(message._data['cn.jpush.android.EXTRA']).url) {let url = JSON.parse(message._data['cn.jpush.android.EXTRA']).url;if (navigator) {navigator.push({name: 'Post',component: Post,params: {url: url}})}}}//处理后退的方法_onBackAndroid() {let navigator = this.refs.navigator;let routers = navigator.getCurrentRoutes();if (routers.length > 1) {navigator.pop();return true;} else {if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {return false;}this.lastBackPressed = Date.now();ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);return true;}}render() {return (<Navigator
                ref="navigator"initialRoute={{name: 'Welcome', component: Welcome}}configureScene={route => Navigator.SceneConfigs.FloatFromBottomAndroid}renderScene={(route, navigator) => {let Component = route.component;return <Component {...route.params} navigator={navigator}/>;}}/>)}
}export default Main;

列表页 home/index.js

作者自行编写页面顶部导航HeaderMixin组件，使用GiftedListView组件展示信息列表，点击列表后用Navigator组件跳转到内容页面，（RN从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。）

class Home extends Component {constructor(props) {super(props);this.state = {};}//获取列表数据_onFetch(page = 1, callback, options) {fetch('http://www.meng10000.com/api/news.php?act=newslist&page=' + page).then(response => response.json()).then(data => callback(data));}//单击列表跳转到内容页_onPress(url) {let {navigator} = this.props;if (navigator) {navigator.push({name: 'Post',component: Post,params: {url: url}})}}//列表行渲染_renderRowView(row) {return (<TouchableOpacity
                onPress={this._onPress.bind(this, 'http://www.meng10000.com/weixin/news.php?act=show&id=' + row.id)}><View style={styles.item}><StatusBar backgroundColor='#888'/><View style={styles.heading}><Text
                            style={{fontSize: 18, color: '#363636', lineHeight: 30}}numberOfLines={2}>{row.title}</Text><View
                            style={{flexDirection: 'row', alignItems: 'center'}}><Icon
                                name={'ios-clock-outline'}size={15}color="#888"/><Text style={{color: '#888', paddingLeft: 5}}>{row.date}</Text></View></View>{row.pic !== '' ?<View style={styles.meta}><Image
                                style={{width: 80, height: 80}}source={{uri: row.pic}}/></View>: null }</View></TouchableOpacity>)}_onEndReached() {this.refs.listView._onPaginate();}//渲染页面，参考GiftedListView组件APIrender() {return (<View style={styles.wrapper}><HeaderMixin/><GiftedListView
                    rowView={this._renderRowView.bind(this)}onFetch={this._onFetch.bind(this)}enableEmptySections={true}refreshable={true}paginationWaitingView={() => null}ref='listView'onEndReached={this._onEndReached.bind(this)}onEndReachedThreshold={25}/></View>)}
}

react-native-quan代码分析笔记相关推荐

React Native v0.55 学习笔记1
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想,相比于 web 的一些组件,RN 使用的是基于原生( android.ios )的 ...
React Native 源码分析（三）——Native View创建流程
1.React Native 源码分析(一)-- 启动流程 2.React Native 源码分析(二)-- 通信机制 3.React Native 源码分析(三)-- Native View创建流程 ...
全网最全 Flutter 与 React Native 深入对比分析
作为 GSY 开源系列的作者,在去年也整理过 <移动端跨平台开发的深度解析> 的对比文章,时隔一年之后,本篇将重新由环境搭建.实现原理.编程开发.插件开发.编译运行.性能稳定.发展未来 ...
React Native跨平台开发学习笔记
App的分类(按开发方式) 大致可以分为这3种: native app(原生app:ios或安卓)原生应用程序原生应用程序外观和运行起来(性能)是最佳的.可以访问本地资源,开法成本高.发布审核周期长 ...
H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
移动端跨平台开发Flutter 与 React Native对比
移动端跨平台开发Flutter 与 React Native 深入对比分析 2019年6月21日20:41:35 发表评论 154 views 移动端跨平台在经历数年沉浮之后,如今还能在舞台聚光灯下雀 ...
React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
20分钟理解React Native For Android原理
原址:http://doslin.com/2017/03/15/react-native-source-code-analysis/ 前言文中所有 RN 缩写指代React Native For A ...
混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明创建安卓原生工程创建Flutter 集成嵌入原生工程创建React Native 解决R ...

react-native-quan代码分析笔记

react-native-quan代码分析笔记

首页 main/index.js

列表页 home/index.js

react-native-quan代码分析笔记相关推荐

最新文章

热门文章