createMaterialTopTabNavigator: tabBarOptions не применяется к android

Question

Работая над проектом React-Native для Android, я добавил вкладки, используя React-Navigation. Теперь я хотел бы применить некоторые пользовательские стили: черный фон вкладки и зеленые подчеркивания, если вкладка активна.

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

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import {createAppContainer} from 'react-navigation';

import TestScreen1 from '../../../screens/TestScreen1';
import TestScreen2 from '../../../screens/TestScreen2';

export default class TwoTabsHorizontal extends React.Component {
  render() {
    return (
      <View style={styles.tabsView}>
        <TabLayout />
      </View>
    );
  }
}

const TabNavigator = createMaterialTopTabNavigator({
  One: {
    screen: TestScreen1,
    navigationOptions: {
      tabBarLabel: 'One',
    },
    tabBarOptions: {
      style: {
        backgroundColor: '#000',
      },
    },
  },
  Two: {
    screen: TestScreen2,
    navigationOptions: {
      tabBarLabel: 'Two',
    },
  },
});

const TabLayout = createAppContainer(TabNavigator);

const styles = StyleSheet.create({
  tabsView: {
    flex: 60,
  },
});

Несмотря на использование tabBarOptions, он все равно выглядит так:

Любая помощь будет быть высоко ценится!

Answer 1

У вас tabBarOptions не в том месте. Это должно быть свойство во втором аргументе createMaterialTopTabNavigator. Пример:

const TabNavigator = createMaterialTopTabNavigator(
  {
    One: {
      screen: TestScreen1,
      navigationOptions: {
        tabBarLabel: 'One',
      },
    },
    Two: {
      screen: TestScreen2,
      navigationOptions: {
        tabBarLabel: 'Two',
      },
    },
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: '#000',
      },
    },
  }
);