react-native - 如何隐藏反应导航标题下的阴影？

Question

如何隐藏反应导航标题下的阴影？
他们看起来像这样。

score 72 · Accepted Answer

将以下内容添加到 navigationOptions 标题样式。

const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    navigationOptions: {
      header: {
        style: {
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS
        },
      },
    },
  },
);

文档还不是很好，但你可以在React Navigation Docs中了解 navigationOptions 。

score 28 · Accepted Answer

在 React Navigation V5 中，您可以这样做：为所有屏幕执行此操作，将screenOptionsprop 应用于<Stack.Navigator>

例如：

      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />
      </Stack.Navigator>

为特定屏幕执行此操作将options道具应用于<Stack.Screen>

例如：

      <Stack.Screen
        name="Example"
        component={ExampleComponent}
        options={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />

更新 V6：

自发布 React Navigation V6 以来，您无法使用headerStyle选项隐藏标题阴影。而不是您可以使用 bolean 选项headerShadowVisible并将其设置为false如下示例：

    <Stack.Screen
      name="Example"
      component={ExampleComponent}
      options={{headerShadowVisible: false}}
    />

score 26 · Accepted Answer

以下对我有用，因为原始样式表在 iOS 上使用“borderBottomWidth”：

const navigator = StackNavigator(screens, {
  navigationOptions: {
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
    }
  }
});

score 20 · Accepted Answer

我不知道这个答案会有多少价值，但分享我的代码让你知道这对我来说适用于react-navigation 版本：3.9.1

const AppNavigation = StackNavigator(
{
  FirstScreen,
},
{
 defaultNavigationOptions: {
  headerStyle: {
    elevation: 0, //for android
    shadowOpacity: 0, //for ios
    borderBottomWidth: 0, //for ios
  },
},
})

score 9 · Accepted Answer

在 v5 中，您可以执行以下操作

<Stack.Navigator>
      <Stack.Screen
        name="Example"
        component={ExampleComponent}
        options={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />
</Stack.Navigator>

score 4 · Accepted Answer

这对我有用：

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    navigationOptions: {
        headerStyle: {
            elevation: 0,
            shadowOpacity: 0,
        }
    }
);

或者

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    header: {
        style: {
            elevation: 0, //remove shadow on Android
            shadowOpacity: 0, //remove shadow on iOS
        }
    }
);

score 3 · Accepted Answer

在反应导航版本 5.xx 中：

      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: colors.darkGray,
          labelStyle: { fontSize: 12 },
          style: { backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0, },
        }}
      >

score 2 · Accepted Answer

尝试通过cardStyle: { shadowColor: 'transparent' }

export const AppNavigator = StackNavigator(
{
  Login: { screen: LoginScreen },
  Main: { screen: MainScreen },
  Profile: { screen: ProfileScreen },
},
cardStyle: { shadowColor: 'transparent' }

根据这个问题React Navigation Stack Navigator 默认阴影样式

score 1 · Accepted Answer

1

下午好，React Navigation 6：

<Stack.Navigator screenOptions={{headerShadowVisible:false}}>

于 2021-11-15T12:03:07.580 回答

score 1 · Accepted Answer

I'm using react navigation v5, i use this code :

 const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    initialRouteName="Home"
    headerMode="screen"
    mode="modal"
    screenOptions={{
      headerStyle: {
        backgroundColor: COLORS.WHITE,
        elevation: 0, // remove shadow on Android
        shadowOpacity: 0, // remove shadow on iOS
        borderBottomWidth: 0,
      },
      headerTintColor: COLORS.GREY,
      headerTitleStyle: {
        fontFamily: 'Montserrat-SemiBold',
        fontWeight: '600',
        fontSize: 18,
      },
    }}>
    <HomeStack.Screen
      name="Home"
      component={Home}
      options={{
        title: 'Expanded',
        headerLeft: () => <RenderHeaderLeft />,
        headerRight: () => <RenderHeaderRight navigation={navigation} />,
        headerTitleAlign: 'left',
      }}
    />
    <HomeStack.Screen name="HomeDetails" component={HomeDetails} />
  </HomeStack.Navigator>
);

put shadowOpacity and elevation inside headerStyle

score 1 · Accepted Answer

截至 2019 年，此答案在版本 3 中不起作用。

新的做法是：


const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0,
      },
    },
  },
);

score 1 · Accepted Answer

在过去的几个小时里，我一直在尝试解决这个问题，终于找到了解决方案。在我的情况下，问题是标题与其他组件的 Z 位置不同。

尝试：

const styles = {
  headerStyle: {
    zIndex: 1
  }
}

score 0 · Accepted Answer

你可以试试这个，它对我有用！

export const SignedOut = StackNavigator({
  SignIn: {
    screen: SignInScreen,
    navigationOptions: {
      title: "SignIn",
      headerStyle: {
        shadowOpacity: 0, // This is for ios
        elevation: 0 // This is for android
      }
    }
  }
});

score 0 · Accepted Answer

阴影是通过高程实现的，使用：

 headerStyle: {
     backgroundColor: 'white',
     shadowColor: 'transparent',
     elevation: 0,
 },

score -2 · Accepted Answer

For React Native Navigation 5

<Stack.Screen
      name={"Profile"}
      component={Profile}
      options={{
        headerTitle: "Profile",
        headerHideShadow: true,
      }}
    />

Or

<Stack.Navigator
    screenOptions={{
      headerHideShadow: true,
    }}
  >

react-native - 如何隐藏反应导航标题下的阴影？

15 回答 15

Related

Reference