OGeek|极客世界-中国程序员成长平台

标题: android - React Navigation - 在 Blurview 中包装标题和选项卡导航器会丢失 Prop [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 14:46
标题: android - React Navigation - 在 Blurview 中包装标题和选项卡导航器会丢失 Prop

我将 React Navigation 2 用于 Expo 的简单 RN 项目。我试图让底部的标题和选项卡显示在模糊的背景上，所以我做了一个 HOC 来用 BlurView 包装库 Header 以提供该功能。它使模糊效果很好，但不幸的是，标题、后退按钮等在此过程中丢失了。有没有办法在 React Navigation 中做到这一点，我使用的代码如下:

const wrappedHeader = props => (
    <BlurView tint="light" intensity={80} style={styles.header}>
        <Header {...props}/>
    </BlurView>
);

class HomeScreen extends React.Component {
    static navigationOptions = {
        header: props => wrappedHeader(props),
        headerTitle: "Home Screen",
    };
   ....
}

---

Best Answer-推荐答案

这是一个让我思考了一段时间的棘手问题。

这是我发现标签栏导航器获得原生 iOS 感觉的解决方案:

import React from 'react';
import { StyleSheet } from 'react-native';
import { BlurView } from 'expo';
import { BottomTabBar } from 'react-navigation-tabs';

const styles = StyleSheet.create({
  blurView: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  bottomTabBar: {
    backgroundColor: 'transparent',
  },
});

export default function TabBar(props) {
  return (
    <BlurView tint="light" intensity={90} style={styles.blurView}>
      <BottomTabBar {...props} style={styles.bottomTabBar} />
    </BlurView>
  );
}

问题似乎与 BlurView 样式有关。

注意:只有在导航器上设置 tabBarComponent 选项后，此代码才能工作，如下所示:

export default createBottomTabNavigator({
  // This part should be different on your side
  Feed: FeedScreen,
  Me: MeScreen,
  Settings: SettingsScreen,
}, {
  tabBarComponent: TabBar,
});

对于标题，我想这一定是相同的技巧，但是您需要将 bottom: 0 替换为 top: 0 .

关于android - React Navigation - 在 Blurview 中包装标题和选项卡导航器会丢失 Prop ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51656804/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4