React Navigation 基础 8 : 术语词汇表

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 ：开始使用