React Navigation 基础 6 : 头部按钮

现在我们已经知道了如何定制屏幕头部，现在来让他有点感觉！夸大了哈，我们只是想让它能够按照良好定义的方式响应我们的触碰。

向头部增加一个按钮

和头部交互最常见的方式是点击头部标题左边或者右边的按钮。现在，我们就向头部右边增加一个按钮(整个屏幕上最不容易被触碰到的地方之一，具体取决于指头和屏幕的大小，但是通常我们会把按钮放在这里)。

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('这是个按钮!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

→执行这段代码
上面组件类静态变量navigationOptions中,this不绑定到任何HomeScreen组件实例，所以在这里没办法调用组件实例级别的setState。但这一点很重要，头部按钮和所属屏幕组件实例交互是非常常见的事。现在我们就来看这个问题怎么解决。

头部和屏幕的交互

头部按钮访问屏幕组件实例上的函数最常见的使用模式是通过params。我们使用一个经典的例子‘计数器’来演示这一点:

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button onPress={params.increaseCount} title="+1" color="#fff" />
      ),
    };
  };

  componentWillMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}

→ 执行这段代码

React Navigation并不保证屏幕组件会在屏幕头部渲染之前开始挂载，并且因为increaseCount是在屏幕组件的componentWillMount中设置的，所以在navigationOptions中有可能还不可用，这也是为什么我们获取参数的时候加上了||{}(可能参数里面什么都还没有)。这个API设计的有点不太好，我们已经计划改善它了。

 

不使用setParams的话，你可以利用一些状态管理库(比如Redux或者MobX)在头部和屏幕之间通信，这种情况下二者之间的通信方式和任何其他两个组件实例之间的通信方式完全一样。

定制返回按钮

StackNavigator提供了平台相关的缺省返回行为。在iOS上返回按钮旁边会有一个标签文字，空间合适的时候，它会显示前一屏的标题，否则就显示"返回"。

使用headerBackTitle和headerTruncatedBackTitle你可以改变返回按钮标签的表现方式(更多内容)。

定义返回按钮的图片，使用headerBackImage。

覆盖返回按钮

任何时候用户有可能从当前屏幕返回上一屏的时候，返回按钮都会自动被渲染添加到头部–换句话讲，导航栈中只要有多于一屏存在，返回按钮就会被渲染。

一般情况下这正好是你需要的。但有些特殊情况下，你想深度定制返回按钮而不仅仅是使用上面提到的这些选项开关，这种情况下你可以设置一个HeaderLeft，就像我们上面设置headerRight一样，这样就可以彻底覆盖缺省的返回按钮。

总结

• 在navigationOptions中你可以通过属性headerLeft和headerRight设置头部按钮。
• 通过headerLeft返回按钮可以被全面定制，但是如果你只想变化标题或者图片，可以使用其他的一些navigationOptions属性：headerBackTitle,headerTruncatedBackTitle和headerBackImage。
• 目前为止所有的代码

英文原文

该系列文章目录

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