createMaterialTopTabNavigator:tabBarOptions未应用于android

createMaterialTopTabNavigator:tabBarOptions未应用于android,android,react-navigation,Android,React Navigation,在Android的React原生项目中,我使用React导航添加了选项卡。现在,我想应用一些自定义样式:黑色选项卡背景和绿色下划线(如果选项卡处于活动状态) 正如在中所建议的,我使用了选项卡选项来实现这一点,但根本没有应用样式。我无法找出这种行为的原因。你能帮助我吗?请参阅下面的代码 import React from 'react'; import {View, StyleSheet} from 'react-native'; import {createMaterialTopTabNavig

在Android的React原生项目中,我使用React导航添加了选项卡。现在,我想应用一些自定义样式:黑色选项卡背景和绿色下划线(如果选项卡处于活动状态)

正如在中所建议的,我使用了
选项卡选项
来实现这一点,但根本没有应用样式。我无法找出这种行为的原因。你能帮助我吗?请参阅下面的代码

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,
  },
});
从“React”导入React;
从“react native”导入{View,StyleSheet};
从“反应导航选项卡”导入{createMaterialTopTabNavigator};
从“react navigation”导入{createAppContainer};
从“../../../screens/TestScreen1”导入TestScreen1;
从“../../../screens/TestScreen2”导入TestScreen2;
导出默认类TwoTabsHorizontal扩展React.Component{
render(){
返回(
);
}
}
const TabNavigator=createMaterialTopTabNavigator({
一:{
屏幕:TestScreen1,
导航选项:{
tabBarLabel:'一',
},
选项卡选项:{
风格:{
背景颜色:“#000”,
},
},
},
二:{
屏幕:TestScreen2,
导航选项:{
tabBarLabel:'两个',
},
},
});
const TabLayout=createAppContainer(TabNavigator);
const styles=StyleSheet.create({
tabsView:{
弹性:60,
},
});
尽管使用了
选项卡选项
,但它仍然是这样的:


任何帮助都将不胜感激

您的
选项卡选项位于错误的位置。它应该是
createMaterialTopTabNavigator
的第二个参数中的属性。例如:

const TabNavigator=createMaterialTopTabNavigator(
{
一:{
屏幕:TestScreen1,
导航选项:{
tabBarLabel:'一',
},
},
二:{
屏幕:TestScreen2,
导航选项:{
tabBarLabel:'两个',
},
},
},
{
选项卡选项:{
风格:{
背景颜色:“#000”,
},
},
}
);

就是这样!非常感谢!:)