更改 createMaterialTopTabNavigator 默认样式

Question

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

Answer 1

你必须完全研究这个链接。另一个重要主题是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下的堆栈导航器。