react-native入门之快速入门---返回键实现

72 阅读 0 评论 48 点赞

我是靠谱客的博主乐观刺猬，最近开发中收集的这篇文章主要介绍react-native入门之快速入门---返回键实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、前言

React-native的趋势已经是铁板钉钉了。。。现在开始学习吧。

二、安装

初始化项目：


react-native init hello-rn

通过adb反向代理端口，将调试的8081端口代理到测试机上

adb reverse tcp:8081 tcp:8081

到对应目录下安装apk

react-native run-android

运行项目：


react-native start

以上命令可以写成一个bat处理文件。

成功后的截图为：

这里写图片描述

三、一个回退按钮的实例

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    BackAndroid,
    ToastAndroid
} from 'react-native';

let Dimensions = require('Dimensions');
let PixelRatio = require('PixelRatio');
let totalWidth = Dimensions.get('window').width;
let totalHeight = Dimensions.get('window').height;
let pixelRatio = PixelRatio.get();

/**
 * 回退按钮
 */
let count = 3;

export default class helloword extends Component {

    //组件挂载时调用
    componentDidMount() {
        BackAndroid.addEventListener('回退按钮', function () {
            if (count >= 1) {
                ToastAndroid.show("按下回退按钮了:" + count, ToastAndroid.SHORT);
                count--;
                return true; // 不返回
            } else {
                return false; // 返回
            }
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>
                    BackAndroid模块使用实例
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('helloword', () => helloword);