Navigation配置项

每个页面在父navigator中如何呈现，都有几项是可以配置的

指定每个选项的两种方法

静态配置： 每个navigation选项都可以直接分配:

class MyScreen extends React.Component {
  static navigationOptions = {
    title: 'Great',
  };
  ...

动态配置： 或者是一个函数，它接受一下参数，并返回一个navigationOptions，该选项将覆盖已定义路由和navigator的navigationOptions

• props - 页面组件可用的相同属性
  • navigation - 页面的navigation prop，该prop包含navigation.state中的页面路由
  • screenProps - 从导航组件上层传递的属性
  • navigationOptions - 如果未提供新值，将使用默认或之前的选项

class ProfileScreen extends React.Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: navigation.state.params.name + "'s Profile!",
    headerRight: <Button color={screenProps.tintColor} {...} />,
  });
  ...

screenProps在渲染时被传入，如果页面位于SimpleApp的navigator中：

<SimpleApp
  screenProps={{tintColor: 'blue'}}
  // navigation={{state, dispatch}} // optionally control the app
/>

通用的 Navigation Options

在每个navigator之间，navigationOptions的title选项都是通用的，它被用于设置给定页面的标题

class MyScreen extends React.Component {
  static navigationOptions = {
    title: 'Great',
  };
  ...

与仅能由navigator视图使用的其他navigationOptions不同，环境可以使用title选型更新浏览器窗口或应用切换器的标题

默认的 Navigation Options

常见的是在页面中定义navigationOptions，但是有时候在navigator中定义navigationOptions是非常有用的

想象下面的情况： 你的TabNavigator代表应用中的一个页面，并且嵌套在一个顶层的StackNavigator中：

StackNavigator({
  route1: { screen: RouteOne },
  route2: { screen: MyTabNavigator },
});

现在，你想改变标题栏的颜色当route2处于激活状态时。这对于route1来说很简单，对于route2本应该也很简单。这就是为什么默认的navigationOptions要这么设置，-他们只需在navigator上进行简单的设置：

const MyTabNavigator = TabNavigator({
  profile: ProfileScreen,
  ...
}, {
  navigationOptions: {
    headerTintColor: 'blue',
  },
});

请注意，你仍然可以决定 也 在页级的页面上指定navigationOptions，例如上面的ProfileScreen。页面的 navigationOptions 将与来自navigator的默认navigationOptions通过key进行合并。只要navigator和页面定义了相同的选项（例如：headerTintColor），将会按照页面的配置执行。因此，你可以通过一下操作，在ProfileScreen处于激活状态时修改headerTintColor（标题栏的文本和图标颜色）：

class ProfileScreen extends React.Component {
  static navigationOptions = {
    headerTintColor: 'black',
  };
  ...
}

Navigation Option 相关

可用的navigationOptions列表，取决于页面添加到的navigator

检查可用项:

• drawer navigator
• stack navigator
• tab navigator