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

2024-04-27 15:03:15

字体：大中小

来源：转载

供稿：网友

一、前言

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()函数

上一篇：javascript基础：window对象内置对话框、模式和非模式对话框、传值方法

下一篇：jquery表格的维护和删除