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

Posted 2023-03-15

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

【英文标题】：Cannot style shadow in react navigation header on android (React native)

【发布时间】：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",
  ,
);

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

【参考方案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

快照：

【讨论】：

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