我的屏幕上没有标题,但我想在一个屏幕上只有标题

时间:2017-06-07 10:57:10

标签: react-native react-navigation

我使用reactnavigation进行导航。我的屏幕上没有标题但我想只在一个屏幕上显示标题(尤其是后退按钮)。 这是我的根导航器:

...
class RootNavigation extends Component {
  props: Props;

  render() {
    const { isProfileSelect } = this.props;
    const initialRouteName = currentRoute(isProfileSelect);

    const RootStackNav = StackNavigator(
      {
        AppHome: { screen: TabBarNavigator },
        SwitchProfile: { screen: SwitchProfileScreen },
        Pin: { screen: PinScreen },
      },
      {
        initialRouteName,
        headerMode: 'none',
      },
    );

    return <RootStackNav />;
  }
}
...

headerMode: 'none',它确实意味着我没有任何标题导航器,它对屏幕AppHomeSwitchProfile有用,但对Pin没有好我需要后退按钮在标题上。因为我必须继续SwitchScreen并且我可以继续Pin屏幕和Pin屏幕,我有时需要回到SwitchScreen我在IOS上没有后退按钮。我只需要在针脚屏幕中设置标题。

这是navigationOptions针脚屏幕:

...
  static navigationOptions = {
    title: I18n.t('screens.pinScreen.navigationOptions.title'),
  };
...

但改变没有任何影响

您能帮我在Pin屏幕上添加标题吗? 谢谢

更新

const RootStackNav = StackNavigator(
  {
    AppHome: {
      screen: TabBarNavigator,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        header: null,
      },
     },
    SwitchProfile: {
      screen: SwitchProfileScreen,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        header: null,
      },
    },
    Pin: {
      screen: PinScreen,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        // header: null,
      },
    },
  },
  {
    initialRouteName,
    // headerMode: 'none',
  },
);

1 个答案:

答案 0 :(得分:1)

我的情况与你的相反...... 我想在一个屏幕上禁用标题,因此我在该特定屏幕中添加了以下代码。

export default class NoHeaderView extends Component {
static navigationOptions = { header: null }
...
//your constructor, render and other stuff
...
}//

让我知道它是否有效。