Блог

Я использую комбинацию tab navigator, stack navigator и switch nagivator в моем приложении react native с react-navigation . Обратите внимание, что я должен поместить каждый экран навигатора вкладок в свой собственный stack navigator, чтобы использовать встроенную функцию заголовка.

Функциональные возможности работают. Но в итоге я получаю 2 заголовка для Feed и Profile страниц, вот так:

Я просто хочу, чтобы у каждого экрана был свой заголовок, а на экране комментариев была кнопка «Назад». Я знаю, что код не очень чистый, и помещение всех этих навигаторов друг в друга требует больших накладных расходов. Итак, каков наилучший способ добиться этого?

App.js

 const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const AppStack = createStackNavigator({ 
  Tab: TabStack,
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);
  

Вы сказали, что хотите, чтобы у Comments экрана был свой собственный заголовок (как и у всех других экранов) и кнопка возврата. К чему конкретно следует вернуться?Понимание структуры навигации упростит ее проектирование.

Было бы чище, если бы ваш, AppStack на самом деле, был просто вашим TabStack . Добавление на Comments экран того же уровня, что и TabStack , вероятно, не помогает вашей проблеме с несколькими заголовками.

Здесь я показываю, как вы могли бы AppStack полностью вырезать их и вложить Comments в любую из Profile вкладок, в зависимости от ваших потребностей……… из Feed

 const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  },
  // if you want Comments to go back to "Feed"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  },
  // if you want Comments to go back to "Profile"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);
  

Однако, если вы хотите Comments фактически работать выше Profile и Feed , вам следует либо сделать его отдельной вкладкой, либо изменить его на Modal на верхнем уровне. Дайте мне знать, если это больше похоже на то, что вам нужно, и я смогу опубликовать больше подробностей!

Попробуйте изменить AppStack следующим образом:

Отредактировано:

я забыл включить его в navigationOptions. try.

 const AppStack = createStackNavigator({ 
  Tab: {
    screen:TabStack,
    navigationOptions: () => ({
      headerMode: 'none',

      // or this

      header: null
     })
  },
  Comments: {
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
},
);