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

来源：互联网发布：java初级中级高级区别编辑：程序博客网时间：2024/05/30 23:03

一、前言

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

以上的语法都是es6的。

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

0 0