我正在try 创建一个底部导航栏,比如YouTube或Instagram,但我遇到了创建阴影效果的问题:

这是我目前的代码;

  shadowColor: '#000000',
  shadowOffset: {
    width: 0,
    height: 0
  },
  shadowRadius: 50,
  shadowOpacity: 1.0,
  elevation: 1

这会产生一个阴影,该阴影仅在导航栏的底部可见,而在顶部不可见.有没有办法放置负阴影偏移,以便阴影在顶部也可见?

例子:

enter image description here

推荐答案

您可以向容器中添加小边距,而不是添加样式:

{
  shadowRadius: 2,
  shadowOffset: {
    width: 0,
    height: -3,
  },
  shadowColor: '#000000',
  elevation: 4,
}

React-native相关问答推荐

react 在顶部选项卡导航中传递本机数据

Error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component stack

react-native 中的layout-only view removal优化是什么?

运行react应用程序时出错

如何手动在抽屉导航底部添加额外的元素(如注销按钮)?

Firebase检测用户是否存在

在 react-native 元素中更改 android 和 ios 的入口文件路径

在使用 redux-persist 重新水化存储之前加载初始状态的默认值

如何将组件中的props传递给 FlatList renderItem

cmd : react-native run-android 在每次文件更改时

java.lang.ClassNotFoundException:在路径上找不到类.MainActivity:DexPathList react-native

React Navigation TabNavigator:在选项卡更改时重置上一个选项卡

如何在 react-native 中从 AsyncStorage 中删除元素

区别需要MainQueueSetup 和dispatch_get_main_queue?

如何知道 FlatList 中的滚动状态?

仅链接字体的方法

居中图像 React Native 加载屏幕

zoom 到指定的标记 react-native-maps

JSON 解析错误:无法识别的令牌'<'

使用 TouchableWithoutFeedback react-native onPress 不起作用