【React Navigation】五、配置标题栏

设置标题栏标题

屏幕组件可以包含一个名为navigationOptions 的静态属性，它既是一个对象也是一个方法，里边包含了各种的属性配置。我们可以通过它里边的title属性来设置标题栏标题

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };

  /* render function, etc */
}

createStackNavigator会使用平台的默认约定，IOS的标题会居中显示，而Android会靠左显示

在标题中使用参数

为了在标题中使用params，我们需要使用navigationOptions函数返回一个配置的对象。我们可能会考虑在navigationOptions中使用this.props，但由于navigationOptions是组件的静态属性，它不会引用组件的实例，因此不能通过这种方式来获取属性。但是，如果我们将navigationOptions作为一个函数，那么React Navigation在调用它时，会传入一个包含{navigation，navigationOptions，screenProps}三种属性的对象 - 这样，我们就可以拿到navigation属性，这样我们可以通过navigation.getParam或navigation.state.params获取参数，并将其用作标题。

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

  /* render function, etc */
}

传递给navigationOptions函数的参数是具有以下属性的对象：

navigation
screenProps
navigationOptions

通过setParams更新navigationOptions

/* Inside of render() */
<Button
  title="Update the title"
  onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
/>

调整标题样式

headerStyle：应用于标题View整体样式。例如在其中设置backgroundColor ，则会作为整个标题栏的背景色
headerTintColor：返回按钮和标题都会使用该颜色作为自己的颜色
headerTitleStyle：用于自定义标题字体的样式

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* render function, etc */
}

上边的配置只会作用于Home页面，当我们切换到另外一个页面，会变回默认的样式。在下一小节，我们将会讨论如何在多个页面间共享navigationOptions

在页面间共享navigationOptions

通常多个页面会使用相似的标题栏。例如，您公司的品牌颜色可能为红色，因此您希望标题背景颜色为红色，淡色为白色。当你运行我们的例子，会注意到当您导航到DetailsScreen时，颜色将恢复为默认值。如果我们必须将navigationOptions标题样式属性从HomeScreen复制到DetailsScreen，以及我们在应用程序中使用的每个屏幕组件，那将会是一个很糟糕的体验。幸运的是，我们不需要这么麻烦，可以将直接将配置移动到堆栈导航器上，达到多个页面的navigationOptions共享。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    /* No more header config here! */
  };

  /* render function, etc */
}

/* other code... */

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

按照以上的配置，所有在RootStack配置的页面，都会共享navigationOptions配置的样式。那我们能否替换共享的navigationOptions属性呢？

覆盖共享的navigationOptions

当页面组件上指定的navigationOptions属性与其父堆栈导航器的navigationOptions属性相同时，页面组件上的选项会决定最终的效果。让我们使用这些知识来反转细节屏幕上的背景和色调。

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

    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  };

  /* render function, etc */
}

使用自定义组件替换默认标题

有时你不仅仅是希望更改标题的文本和样式，而是其他更多的变化 - 例如，你可能希望渲染图像代替标题，或将标题设置为按钮。在这些情况下，您可以使用自定义组件完全覆盖默认显示标题的组件。

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };

  /* render function, etc */
}

Comments