Question

我的应用程序中有三个选项卡，其中有createMaterialTopTabNavigator。这三个选项卡本身属于不同的createStackNavigator。我已将抽屉图标作为标题正确地传递给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，并且如果我在navigationOptions之外传递样式选项，则该样式有效，但随后从右侧隐藏了HeaderRight图标

Answer 1

您必须完全研究本link。另一个重要的主题是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 下的堆栈导航器中。

更改createMaterialTopTabNavigator默认样式

1 个答案: