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