在上一节“Hello React Navigation”中,我们定义了一个带有两个路由(Home和Details),下面来看如何从Home
调到Details
。
在浏览器中我们这样实现跳转:
<a href="details.html">Go to Details</a>
或者用另一种方法
<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>
下面看在React Navigation
中的实现。
1. 跳转到新的屏幕
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
// ... other code from the previous section
说明:
this.props.navigation
:传递给StackNavigator
中每个屏幕组件的navigation
属性。navigate('Details')
:调用属性navigation
上的函数navigate
,参数是路由名称。实现屏幕组件跳转。
调用方法
this.props.navigation.navigate
时提供的路由名称如果不是我们在StackNavigator中定义的,那什么都不会发生。换句话讲,我们只能跳到我们自己的StackNavigator上定义的路由。
现在有两个路由,Home
和Details
。如果从Details
跳转到Details
,会发生什么?代码如下:
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
当点击button按钮时,它什么也不会做(注意:这是和1.x版本中不同的地方,在1.x版本中,会向导航栈中压入一个新的屏幕)。
如果想向导航栈中添加一个屏幕,则需要用到push
:
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>
2. 返回
当有可能从当前活跃屏幕返回时,StackNavigator
会在当前活跃屏幕的头部自动包含一个返回按钮(如果导航栈中只有一屏,没有什么能返回的,所以也不存在返回按钮)。如果有特殊需求,可自定义headerLeft
组件实现。
如果在程序中触发该行为,可以调用this.props.navigation.goBack()
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
在Android平台上,React Navigation会把
goBack()
函数关联到硬件返回按键,所以点击物理回退按键能达到同样的效果。
3. 返回多个屏幕
另一个常见的要求是能够返回多个屏幕 。
例如,如果您在堆栈中有几个屏幕深度,并且想要将它们全部撤回到第一个屏幕。在这种情况下,我们知道我们想要回去Home我们可以使用navigate('Home')
。另一种选择是navigation.popToTop()
,可以回到堆栈中的第一个屏幕。
如果现在的导航栈是这样:A -> B -> C,从页面C返回到A在1.x中处理这个事情很麻烦,在2.x中使用navigate('A')
就可以达到回退多个页面的目的。
4. 总结
this.props.navigation.navigate('RouteName')
:如果堆栈导航器尚未位于堆栈中,则将新路线推送到堆栈导航器中,否则会跳转到该屏幕。- 我们可以用
this.props.navigation.push('RouteName')
继续在栈中压入路由。 - 标题栏将自动显示后退按钮,但也可以通过调用以编程方式返回
this.props.navigation.goBack()
。在Android上,硬件后退按钮按同样会达到返回效果。 - 可以通过
this.props.navigation.navigate('RouteName')
返回到栈中已有的屏幕。所以,navigate()
既有压入新栈的作用,又有回退的作用。 - 该
navigation
属性可用于所有屏幕组件(在路由配置中定义为屏幕的组件以及输出为React Navigation的组件)。
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些