Как оформить заголовок в реагирующей навигации

Question

Я пытаюсь стилизовать заголовок в react-navigation, где объект автоматически генерируется Expo.

Я пытаюсь стилизовать фон заголовка и ориентацию заголовка.

Я перепробовал все возможные места, включая navigationOptions, но все не удалось.

В приведенной ниже панели вкладок кода правильно изменен цвет фона. Но тот же метод не удалось для заголовка.

Любое руководство приветствуется.

import React from 'react';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const LinksStack = createStackNavigator({
    Links: LinksScreen,
});

LinksStack.navigationOptions = {
    tabBarLabel: "Links",
    tabBarIcon: ...
};

const SettingsStack = createStackNavigator({
    Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
    tabBarLabel: "Settings",
    tabBarIcon: ...,
};

export default createBottomTabNavigator(
    {
        LinksStack,
        SettingsStack,
    },
    {
        tabBarOptions: {
            style: {
                backgroundColor: '#123456',
            },
        }
    },
);

Answer 1

попробуйте это:

static navigationOptions = {
  title: 'Chat',
  headerStyle: { backgroundColor: 'red' },
  headerTitleStyle: { color: 'green' },
}

Answer 2

Вы можете попробовать это

  export default createBottomTabNavigator(
  {

    LinksStack: {
      screen: LinksStack,
      navigationOptions: LinksStack.navigationOptions(), // style here
    },
    SettingsStack,
  }

Answer 3

Наконец я понял, что я делаю не так.

Кажется, я искал ответ не в том месте. Следующее изменение решило проблему:

class LinksScreen extends React.Component {
    static navigationOptions = {
        title: "Links Title",
        headerStyle: { backgroundColor: '#123456', },
        headerTitleStyle: { color: "#654321" },
    };
...
}

Answer 4

Вы можете попробовать это, передавая headerStyle внутри каждого экрана на

export default createBottomTabNavigator({ LinkStack: { screen: LinkScreen, navigationOptions: { // you need to call LinkStack.navigationOptions here headerTitle: 'LinkScreen', headerStyle: { backgroundColor: 'red', ...otherStyles, }, }, } })

Или вы можете использовать defaultNavigationOptions в вашем stackNavigator, если вы не указали c стили заголовков для разных экранов.

В вашем случае вам нужно позвонить LinkStack.navigationOptions для navigationOptions.