Изменение стиля по умолчанию createMaterialTopTabNavigator - PullRequest
Новая
       45

Изменение стиля по умолчанию createMaterialTopTabNavigator

0 голосов
/ 04 июля 2019

В моем приложении есть createMaterialTopTabNavigator с тремя вкладками. Эти три вкладки сами принадлежат различным createStackNavigators. Я передал значок ящика в качестве заголовка справа для createMaterialTopTabNavigator.

Я хочу изменить цвет фона вкладок createMaterialTopTabNavigator, но он переопределяется с моим стилем иконок HeaderRight. 

const Daily = createStackNavigator(
  {
    Daily: {
      screen: DailyStack,
    },

    Another:{
      screen: Another,
    }
  },
  {
    headerMode:'none'
  },
);

const Monthly = createStackNavigator({
  Monthly: {
    screen: MonthlyStack,
  },
},
{
  headerMode:'none'
});


const Range = createStackNavigator({
  Range: {
    screen: RangeStack,
  }
},
{
  headerMode:'none'
});



    const DashboardTabNavigator = createMaterialTopTabNavigator(
      {
        Daily,
        Monthly,
        Range
      },

      {
        navigationOptions: ({ navigation }) => {
          return {
            // tabBarOptions:{
            //   indicatorStyle: {
            //     backgroundColor: "#2E86C1",
            //   },
            //   // tabStyle:{
            //   //   backgroundColor: '#F7F9F9'
            //   // },
            //   labelStyle :{
            //     color: '#2E86C1'
            //   },
            //   activeTintColor:'blue',
            //   inactiveTintColor: {
            //     color: 'green'
            //   },
            //   style: {
            //     backgroundColor: 'white',
            //     elevation: 0, // remove shadow on Android
            //     shadowOpacity: 0, // remove shadow on iOS,
            //     borderWidth:1,
            //     borderColor:'#ccc'
            //   }
            // },
            headerRight: (
              <Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
            )
          };
        }
      }
    )

Если я передаю параметры стилизации внутри navigationOptions, то стилизация не работает; только HeaderRight показывает, и если я передаю параметры стиля за пределами NavigationOptions, стиль работает, но затем он скрывает значок HeaderRight справа

1 Ответ

1 голос
/ 04 июля 2019

Вы должны полностью изучить эту ссылку .Еще одна важная тема: navigationOptions относится к каждому экрану в стеке.например: 

const App = createMaterialTopTabNavigator({
  TabScreen: {
    screen: TabScreen,
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#633689',
      },
      headerTintColor: '#FFFFFF',
      title: 'TabExample',
    },
  },
});

, поэтому, если вы хотите установить стиль для верхней панели вкладок, вы должны использовать свойство defaultNavigationOptions, например: 

const DashboardTabNavigator = createMaterialTopTabNavigator(
      {
        Daily,
        Monthly,
        Range
      },
      {
        defaultNavigationOptions: ({ navigation }) => {
          return {
            tabBarOptions:{
              style: {
                backgroundColor: 'white',
                elevation: 0, // remove shadow on Android
                shadowOpacity: 0, // remove shadow on iOS,
                borderWidth:1,
                borderColor:'#ccc'
              }
            },      
          };
        }
      }
)

Общий доступНавигация по экранам

Часто требуется настроить заголовок аналогичным образом на многих экранах.Например, цвет марки вашей компании может быть красным, поэтому вы хотите, чтобы цвет фона заголовка был красным, а цвет оттенка - белым.Удобно, что это цвета, которые мы используем в нашем рабочем примере, и вы заметите, что при переходе к DetailsScreen цвета возвращаются к значениям по умолчанию.Не было бы ужасно , если бы нам пришлось скопировать свойства стиля заголовка navigationOptions из HomeScreen в DetailsScreen, и для каждого компонента экрана, который мы используем в нашем приложении?К счастью, у нас нет.Вместо этого мы можем переместить конфигурацию в навигатор стека под свойством defaultNavigationOptions .

...