更改 createMaterialTopTabNavigator 默认样式 [英] Changing createMaterialTopTabNavigator default styling

问题描述

我的应用程序中有 createMaterialTopTabNavigator 和三个选项卡.这三个选项卡本身属于不同的 createStackNavigators.我已将抽屉图标作为我的标题权传递给 createMaterialTopTabNavigator.

I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.

我想编辑 createMaterialTopTabNavigator 选项卡的背景颜色，但它被我的 HeaderRight 图标样式覆盖了.

I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.

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 显示，如果我在导航选项之外传递样式选项，样式会起作用，但它会从右侧隐藏 HeaderRight 图标

If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right

推荐答案

你必须完全学习这个 链接.另一个重要的主题是 navigationOptions 与堆栈中的每个屏幕相关.比如这个:

you must entirely study this link. another important subject is that navigationOptions related to every screen in stack. such as this:

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

所以如果你想为顶部标签栏设置样式，你必须使用 defaultNavigationOptions 属性，例如:

so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:

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'
              }
            },      
          };
        }
      }
)

跨屏幕共享通用导航选项

想要在多个屏幕上以类似的方式配置标题是很常见的.例如，您公司的品牌颜色可能是红色，因此您希望标题背景颜色为红色，色调为白色.方便的是，这些是我们在运行示例中使用的颜色，您会注意到，当您导航到 DetailsS​​creen 时，颜色会恢复为默认值.如果我们必须将 navigationOptions 标题样式属性从 HomeScreen 复制 到 DetailsS​​creen 会不会很糟糕，并且对于我们在应用程序中使用的每个屏幕组件?谢天谢地，我们没有.我们可以将配置向上移动到 defaultNavigationOptions 属性下的堆栈导航器.

It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.

这篇关于更改 createMaterialTopTabNavigator 默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！