Dictionary.com对于“模态”没有给出一个令人满意的定义,不过语义UI是这么描述“模态”的:
A modal displays content that temporarily blocks interactions with the main view。
“模态”显示内容的同时临时阻止用户和主视图的交互。
模态就像一个弹出框–它不是主导航流程的一部分—通常它有一个不同的切屏方式,不同的关闭方式并且它主要用来关注内容或者交互的某个部分。
把这一点作为React Navigation
基础的一部分来阐述,不仅因为它是一个很常见的使用情况,而且因为其实现基于嵌套导航器知识,这是React Navigation
非常重要的一部分。
1. 创建一个模态导航栈
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
headerLeft: (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Info"
color="#fff"
/>
),
/* the rest of this config is unchanged */
};
};
/* render function, etc */
}
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
注意:
+ 我们知道CreateStackNavigator
返回一个React组件,这个组件同样也可以用作一个屏幕组件,这样就能把CreateStackNavigator
嵌套到另一个CreateStackNavigator
中去。这样做很有用,因为我们希望模态窗有不同的切屏方式,而且在整个模态窗导航栈中禁用头部。对于Tab
导航,当从标签A切换到标签B时,我们会希望标签A的保持原来的导航状态。
下面这张图表示了上面代码中的导航结构:
+ CreateStackNavigator
的设置选项mode
可以是modal
或者card
,card
是缺省值。在苹果手机上,modal屏幕的表现是从下方滑出,允许用户从顶部向下滑动关闭该屏幕。在安卓系统上,modal没有什么特殊效果,因为安卓平台上本来全屏模态就没有特殊的屏幕切换行为。
+ 调用navigate
时除了需要指定目标屏幕的路由名称之外其他都不需要指定。React Navigation
会尝试寻找最近的匹配路由然后执行屏幕跳转。比如点击HomeScreen
头部的Info按钮被点击时:导航会从HomeScreen
流转到MainStack
,然后导航会向上流转到根部的RootStack
,而RootStack中包含了导航目标屏幕MyModal
,就此到目标屏幕的导航事件就可以完成了。
2. 总结
- 改变屏幕切换方式可以使用其设置选项
mode
。当该选项设置为modal
时,整个屏幕的出现是自底向上的一个动画而不是从右向左。该选项对整个StackNavigator
中所有屏幕有效,因为我们想对其他屏幕使用自右向左切屏方式,所以我们还采用了另外一个使用缺省设置的导航栈。 - this.props.navigation.navigate 遍历整个导航树(包括导航树中所有的导航栈)寻找匹配的目标路由屏幕。
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些