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

一、前言

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

二、安装

初始化项目：

react-native init hello-rn123123

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

adb reverse tcp:8081 tcp:808111

到对应目录下安装apk

react-native run-android1212

运行项目：

react-native start123123

以上命令可以写成一个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);

​以上的语法都是es6的。

componentDidMount:我们可以理解它是js的window.load()函数

欢迎分享本文，转载请保留出处：前端ABC » react-native入门之快速入门—返回键实现