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组件的API    componentDidMount() {        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组件API    render() {        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>        )    }}