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>
        )
    }
}