callstack / callstack/react-native-paper

Add possibility to override default elevation of BottomNavigationBar

未关闭
#4,582 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
BottomNavigation feature request
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

**Is your feature request related to a problem? Please describe.**
I know the v3 spec suggests that the `BottomNavigationBar` should not have any shadow but currently it is possible to "bypass" the spec on iOS by simply setting the various `shadow*` style props (i.e. `shadowColor`, `shadowOpacity`, `shadowOffset`, `shadowRadius`).

The same is currently not feasible on Android when setting the `elevation` style prop because of [this](https://github.com/callstack/react-native-paper/blob/main/src/components/BottomNavigation/BottomNavigationBar.tsx#L588) line.

Below a simple example of casting a shadow working on iOS but not working on Android:

```
const Tab = createMaterialBottomTabNavigator();

export default function App() {
return (


// ...


);
}

const styles = StyleSheet.create({
barStyle: {
backgroundColor: '#fff',
// does not work on Android
elevation: 4,
// works on iOS
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: -2 },
shadowRadius: 4,
},
});
```

**Describe the solution you'd like**
It would be amazing if the `BottomNavigationBar` could use the `elevation` set in the `barStyle`, maybe something as simple as:

```
const BottomNavigationBar = ({

// ...

return (

贡献指南

打开贡献指南

调研方向

从 src/components/BottomNavigation/BottomNavigationBar.tsx 中引用的行开始,检查 v3 中如何处理 barStyle,并与之前的行为进行比较。验证提供的 Android 示例:barStyle 中的 elevation 应影响 BottomNavigationBar,同时现有的 iOS 阴影样式仍应可用。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
功能
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。