无法在android上的反应导航标题中设置阴影样式（反应本机）答案

【问题标题】：Cannot style shadow in react navigation header on android (React native)无法在android上的反应导航标题中设置阴影样式（反应本机）
【发布时间】：2020-11-12 17:59:58
【问题描述】：

希望我能在这里找到一些帮助。所以在最后一天我一直在努力尝试在反应导航标题上设置阴影样式。问题是android上根本不显示阴影。这里以 ios 显示器为例（设备：iphone 11 pro max 模拟器）：

这里是安卓显示器（设备：pocophone f1）：

还请找到一个代码 sn-p。我尝试通过 options 属性设置 Stack.screen 的样式，虽然它适用于 IOS，但它不适用于 android。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Home from "./components/Home";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Logo from "./components/Logo";
import Bar from "./components/Bar";

export default function App() {
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{}}>
        <Stack.Screen
          name="Home"
          options={{
            headerTitle: () => <Logo></Logo>,
            title: "home",
            headerTitleAlign: "center",
            headerStyle: {
              backgroundColor: "#48CFAD",
              height: 100,
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowColor: "black",
              shadowOpacity: 1,
              shadowRadius: 3.84,
              elevation: 3,
            },
          }}
          component={Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

是否有其他人遇到此问题或询问过此问题？无论如何，提前感谢您的帮助！

【问题讨论】：

标签： android ios react-native

【解决方案1】：

试着增加一点高度，

我将它设置为 15 并且阴影正在显示。

但您可能必须对 ios 和 android 使用不同的值，因为相同的值会显示不同的结果。

...
<NavigationContainer>
      <Stack.Navigator screenOptions={{}}>
        <Stack.Screen
          name="Home"
          options={{
            headerTitle: () => <Logo></Logo>,
            title: 'home',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#48CFAD',
              height: 100,
              shadowOffset: {
                width: 0,
                height: 3,
              },
              shadowColor: 'black',
              shadowOpacity: 1,
              shadowRadius: 3.84,
              elevation: 15,
            },
          }}
          component={Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
...

您可以在这里尝试工作代码：Expo Snack

快照：

【讨论】：

是的！你是对的，应该做一个更高的海拔来看到一些阴影。我猜我不能说太多，因为变化太小了。