Заголовок не работает в реакции-навигации createStackNavigator

Я использую createStackNavigator внутри createBottomTabNavigator из react-navigation в своем приложении. Я хочу, чтобы на моем экране был заголовок. Следуя руководству по React Navigation, я реализовал это следующим образом:

createBottomTabNavigator(
    {
      Home: createStackNavigator(
       {screen: HomePage, navigationOptions: () => { title: 'Home'}}),
      ...
    },

Однако на панели навигации ничего не отображается. Я также пробовал headerTitle, но безрезультатно.

Что я делаю неправильно?


react-native react-navigation react-navigation-stack
person Can Poyrazoğlu    schedule 26.04.2019    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Есть 2 способа установки navigationOptions, объекта или функции

Объект

{
    screen: HomePage,
    navigationOptions: { title: 'Home' }
}

Функция, возвращающая объект

{
    screen: HomePage,
    navigationOptions: ({ navigation }) => {
       return { title: 'Home' }
    }
}

Ваш код не работает из-за ошибки в вашей стрелочной функции, вы должны добавить скобку вокруг тела, чтобы она возвращала объект.

{ screen: HomePage, navigationOptions: () => ({ title: 'Home'}) }
person Ewe Tek Min    schedule 26.04.2019
comment
Это правильный ответ. Другой способ сделать это { screen: HomePage, navigationOptions: () => {return { title: 'Home'}} } - person Vencovsky; 26.04.2019
comment
Когда я передаю простой объект createStackNavigator({screen: HomePage, navigationOptions: { title: 'Home'} }), я получаю сообщение об ошибке: компонент для маршрута 'navigationOptions' должен быть компонентом React. Например: импортировать MyScreen из './MyScreen'; ... navigationOptions: MyScreen,} Вы также можете использовать навигатор: импортируйте MyNavigator из './MyNavigator'; ... navigationOptions: MyNavigator,} - person Can Poyrazoğlu; 26.04.2019
comment
вы неправильно определили свой маршрут, createStackNavigator должен быть объектом с ключом, например createStackNavigator({ Home: { screen: HomePage, navigationOptions: { .... }}}), обратитесь к responsenavigation.org/docs/en/stack-navigator.html - person Ewe Tek Min; 26.04.2019
comment
Ты был прав. Это сработало, когда я превратил его в пару ключ-значение вместо объекта. - person Can Poyrazoğlu; 26.04.2019

arrow_upward
1
arrow_downward

navigationOptions не должен быть функцией, это JSON. Итак, снимаем стрелки и делаем так:

createBottomTabNavigator(
{
  Home: createStackNavigator(
   {screen: HomePage, navigationOptions: { title: 'Home'},
  ...
},
person SmoggeR_js    schedule 26.04.2019
comment
reactnavigation.org/docs/en/stack-navigator.html четко показывает пример как функция. Однако я все равно попробовал и получил ошибку: The component for route 'navigationOptions' must be a React component. - person Can Poyrazoğlu; 26.04.2019