Header – 头部
也叫做导航头部,导航条,navbar
,或许还有其他什么叫法。特指导航栈内某个屏幕最上方的一块矩形区域,包含了返回按钮和屏幕标题(可能还有一些其他东西,比如标题右方可能还会有文字图片按钮等)。这整个矩形区域在React Navigation中被叫做"header"(头部)。
Screen component – 屏幕组件
一个屏幕组件指的是我们的路由配置中所使用的组件:
const RootStack = StackNavigator(
{
Home: {
screen: HomeScreen, // <---- 这是一个屏幕组件
},
Details: {
screen: DetailsScreen, // <---- 这也是一个屏幕组件
},
},
{
initialRouteName: 'Home',
}
);
屏幕组件类名字中的后缀Screen
完全是可选的,可有可无,只不过这是一个常用的约定;你就是把它命名为CasaPantalla
(没有后缀Screen
)也一样工作。
之前我们看到屏幕组件被提供了属性navigation
。这里需要重点指出的是,仅在React Navigation将一个组件作为屏幕组件渲染时才会对其提供该属性。举个例子讲,假如我们将DetailsScreen
组件不作为导航栈的路由定义,而是定义为HomeScreen
的孩子,那么DetailsScreen
就不会被提供navigation
属性,也就是说,这种情况下,你在HomeScreen
中点击导航到DetailsScreen
的按钮,你会看到一个经典javascript错误提示:undefined is not an object
。
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')}
/>
<DetailsScreen />
</View>
);
}
}
文章Navigation prop参考手册对这一点有更详细的讲解,还提供一些变通方案,另外还包含了关于this.props.navigation
更多可用的属性的介绍。
英文原文
该系列文章目录
React Navigation 基础 8 : 术语词汇表
React Navigation 基础 7 : 全屏模态
React Navigation 基础 6 : 头部按钮
React Navigation 基础 5 : 配置导航头部
React Navigation 基础 4 : 屏幕间切换参数传递
React Navigation 基础 3 : 屏幕间切换
React Navigation 基础 2 : Hello React Navigation
React Navigation 基础 1 :开始使用