更改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} />
            )
          };
        }
      }
    )

如果我在导航中传递了样式选项，则样式不起作用；只有headright显示，如果我通过导航之外的样式选项，则造型有效，但随后隐藏了右

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 。