React Navigation 的使用基础部分（八）术语汇编

原文链接

Header （导航栏）

也称为 navigation header, navigation bar, navbar, 或者其他。是界面上方的矩形区域，包含返回键和该页的标题。在React Navigation中Header通常是指整个矩形区域。

Screen component（screen组件）

screen component就是我们在路由配置中使用的组件

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,    // <----
    },
    Details: {
      screen: DetailsScreen, // <----
    },
  },
  {
    initialRouteName: 'Home',
  }
);

组件名称的后缀Screen（就是箭头所指的地方）是任意起的，但是经常作为惯例来使用；我们也可以起CasaPantalla。我们之前看到screen组件中有navigation属性。但是要记住，只有被React Navigation渲染为一个路由的时候才可以（比如，使用this.props.navigation.navigate）。举个栗子，如果我们将DetailsScreen作为HomeScreen的子组件使用，那么DetailsScreen中并不会有navigation属性，当你点击"Go to Details again"按钮的时候，app会抛出一个典型的错误"undefined is not an object"。

class HomeScreen extends React.Component {
  render() {
    return (
      
        Home Screen
         this.props.navigation.navigate('Details')}
        />
        
      
    );
  }
}

更多

Navigation Prop（Navigation 属性）

该属性会被传递到所有的screen中：

• dispatch 向路由器发送一个action
• state 当前screen的路由
• getParam 获取路由中的参数
• navigate, goBack, 等  方便的发送某些action（我觉得就是针对某些功能把dispatch进行封装后直接使用）

Navigation State（navigation状态）

navigation状态一般来说看起来是这样的：

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', routeName: 'Home' },
    { key: 'B', routeName: 'Profile' },
  ]
}

上面的这个状态中，有两个路由（可能是tab类型的，也可能是stack中卡片式的）。index表示激活的路由，也就是B（值是1，A是0，B是1）。

Route（路由）

每个路由是navigation状态的一部分，包含一个key用以识别，一个routeName来指明路由的类别。也可以包含任意参数。

Child Navigation State（子导航状态）

当构建一个导航器时，路由（route）也可能充当一个navigation状态。看上去是这样的：

{
  key: 'B',
  routeName: 'Profile',
  params: { id: '123' },
  index: 1,
  routes: [ {...}, {...} ]
}

基础部分应该时结束了