【翻译】ReactNavigation/Configuring

只有StackNavigator导航系统支持设置头部。

在之前的例子中，我们在App中创建了一个StackNavigation来展示几个界面。
当导航到一个会话界面的时候，我们可以通过向navigate方法中传递参数来向新的路由传递。在这个时候，我们希望在会话界面中提供人的名字（Lucy）。

this.props.navigation.navigate('Chat', { user:  'Lucy' });

user参数可以被会话界面所接收：

class ChatScreen extends React.Component {
  render() {
    const { params } = this.props.navigation.state;
    return <Text>Chat with {params.user}</Text>;
  }
}

Setting the Header Title - 设置头部标题

Next, the header title can be configured to use the screen param:
下面，可以使用参数来定义头部标题：

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  ...
}

Adding a Right Button - 添加一个右侧按钮

接下来我们添加一个 头部导航选项 来允许我们添加一个定制的右侧按钮：

static navigationOptions = {
  headerRight: <Button title="Info" />,
  ...

导航器选项可以根据导航器属性来定义。让我们根据路由参数来渲染一个不同的按钮，并且按钮当按下时执行navigation.setParams方法。

static navigationOptions = ({ navigation }) => {
  const {state, setParams} = navigation;
  const isInfo = state.params.mode === 'info';
  const {user} = state.params;
  return {
    title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
    headerRight: (
      <Button
        title={isInfo ? 'Done' : `${user}'s info`}
        onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
      />
    ),
  };
};

现在，头部可以影响视图的路由／状态：
看其余的头部选项信息, 到头部选项文档。