React Navigation 的使用基础部分（六）导航栏按钮

最新推荐文章于 2024-09-10 05:36:05 发布

小xuanxuan

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量2.6k

点赞数

原文链接

我们已经知道如何自定义导航栏的样式，现在我们让其有感知！好吧，这可能有点过，我们让其能响应触摸。

在导航栏加一个按钮

与导航栏交互最普遍的做法是触摸title左边或者右边的按钮。让我们在header右边添加一个按钮吧！

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

在navigationOptions中，this绑定的并不是HomeScreen的实例，所以我们不能调用setState或者任何实例的方法。这很重要因为header中的按钮与header所在的screen交互是非常普遍的。所以我们接下来我们看看怎样做。

可以使用专门渲染header中的按钮的库：react-navigation-header-buttons

Header 与screen component交互

在header按钮中，获取组件实例函数的方法最常用的就是使用params。我们将用一个经典的案例来说明：计时器。

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
    };
  };

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

  state = {
    count: 0,
  };

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

  /* 稍后再render函数中我们会显示计数 */
}

React Native并不能保证你的screen组件再header之前被挂载。因为increaseCount参数是再componentDidMount中设置的，再navigationOptions中可能不可用。一般来说这不是问题因为如果回调时null时，Button的onPress和Touchable组件什么都不会做。如果你用了自定义的组件，也应该确保这一点。

作为setParams的备选方案，你可以使用状态管理库（redux或者mobx）

自定义返回键

createStackNavigator提供的返回按键随着平台不同而不同。iOS上包括按钮已经旁边的标签，当标题适合可用空间的十九，标签显示上一个页面的标题，否则显示"Back"。

headerBackTitle 和headerTruncatedBackTitle属性可以改变标签的行为。

自定义返回键图标可以使用headerBackImage属性

覆盖返回键

任何一个可以返回的screen都会自动渲染返回键--换句话说，只要栈中有不知一个screen，返回键就会被渲染。

一般来说这是我们想要的。但是在某些情况下，上面提到的方法比那个不能满足你的自定义返回按钮，这样你就可以使用headerLeft，就跟我们使用headerRIght一样。leaderLeft属性接受React组件，可以用该组件覆盖返回键的点击行为。

Summary

你可以通过navigationOptions的headerLeft 和 headerRights属性在header中设置按钮 .
使用 headerLeft时返回按钮时完全自定义的，但是如果你仅仅想要改变图标或者图片，也有其他方法— headerBackTitle, headerTruncatedBackTitle, 和headerBackImage.