React_Native页面跳转和Android回退键

首先文中内容参考一下网上的大神：

本文的页面主要是这篇博客的：

blog.csdn.net/xiangzhihong8/article/details/52564484

学习RN基本上都是以这位大神写的作为蓝图：

www.jianshu.com/p/4df92c335617

还有一些RN的知识点参考了React-Native中文网：

reactnative.cn/

首页就是这样的：基本看上去就和上面那位博主的页面一模一样

但我这边使用按钮，博主那些是<Text></Text>.

重点说一下RN是木有Button的，

木有Button，

木有Button，

木有Button，

重要事情说三篇；

我这里是用

网上还有说有另外两个View可以实现Button的效果；

这样就可以实现效果如下图的Button：

本篇不准备RN的样式，这种东西感觉就是多练就有感觉，而且我自己还不是十分熟悉,先忽略；

这样只说说

TouchableHighlight截图上的属性：

underlayColor={'#00CED7'}：是指点击后touchableHighlight的呈现什么颜色;

onPress={this.loginInOnPress.bind(this)} :是指点击登录按钮的点击方法，onPress是自定义方法名可以随便起，这样关键提一下需要绑定this；需要绑定this；
需要绑定this；.bind(this)  因为我写的时候就是没有注意这一点导致后面找不到一些属性，找了很久才找到原因，只怪JS知识得太少了。

言归正处就说回在RN是如何实现页面跳转的：

RN提供Navigator这么一个东东：

该东东可以实现类似Intent跳转的效果

需要写一个Component启动App时以这个Component作为第一个Component；

在该Component即StartComponent的render方法实现Navigator初始化

解释下里面的每个属性

ref = "navigator"是为了之后说的Android回退键用的，只是页面跳转时不需该ref的

initialRoute = {}  是传入App的第一个页面，name和component通常都是用同一个名字，但注意一个是字符串，另一个是变量引用对象；这里需要引入该变量引用对象的：

不然会报错的，不过通过报错信息都可以很快看到错误原因;

configureScene 是配置页面跳转的动画和手势；该属性可以不写有默认的跳转页面动画；

renderScene  是传参和navigator对象全局可用所需的；

这样就定义了一个Navigator；然后看第一个页面LoginView_Demo

上面截图是一个点击事件的方法：

let _this = this;这里是为了getUser方法使用当前的this；

const {navigator} = this.props;  是保证全局使用同一个navigator对象；

这里的写法是es6的写法等同于：

const navigator = this.props.navigator;

navigator.push说明navigator是一个数组类型，而且是一个堆栈结构。

name和Component是指跳转的页面，params是传递页面的参数，getUser是一个回调方法即另外一个页面可以通过对该方法传递处理后的数据，然后供本页面使用，简而言之就像调用接口后返回数据的回调方法。

在截图上传递了id过去；我们看看跳转的页面如何处理：

在该页面在页面渲染完后：

componentDidMount方法：this.props.id可以获取到之前页面传过来的参数；

this.props.getUser就是把处理后的数据回调给上一页面，这里把user对象传给前一个页面；

最后，

navigator.pop();是弹栈，类似Android的finish()

Android回退键

在RN使用Android回退键需要添加监听方法：

BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid.bind(this));

'hardwareBackPress' 是注册安卓回退键；

this.onBackAndroid.bind(this); 是监听安卓设备的回退键

这里涉及到RN的两个生命周期的方法：

componentDidMount(){} 是页面渲染完毕就会调用此方法

componentWillUnmount(){}  是页面即将卸载就会调用此方法

这里有个Constant.exitApp变量是为了实现，短时间点击两次即退出程序。

类似于java的存储常量的类，JS没有类的概念就用一个对象存储。

在看看onBackAndroid方法：

该方法有个返回值true  or   false;

返回true在测试过程中是没有什么反应的，

而返回false是调用默认的back键功能

还有一个方法就是BackAndroid.exitApp();是RN提供的退出程序的方法。

记录测试时的情况

这里有个地方需要注意，就是当你调用BackAndroid.exitApp()时，其实并没有完全退出程序，其实与Android的机制是一致的。当原生把所有Activity  finnish掉，程序也不是完全退出的，Android系统会根据情况销毁程序进程。

这里就会出现一个情况，就是如果不在componentWillUnmount() {}方法重新把退出标志设置为false即Constant.exitApp=false;再次进入程序就会是之前记录的变量。因为之前我是把此变量写在全局

但在测试的时候发现重新进入程序是不会初始化该变量的。所以在componentWillUnmount() {}重新设置变量值。