Android 反应导航-在Blurview中包装标题和选项卡导航器会松开道具

我正在使用React Navigation 2进行世博会的一个简单RN项目。我试图让底部的标题和标签显示在模糊的背景上，所以我做了一个HOC，用一个BlurView来包装库标题，以提供该功能。它渲染模糊效果很好，但不幸的是，标题、后退按钮等在渲染过程中丢失。在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",
    };
   ....
}

const wrappedHeader=props=>(
);
类主屏幕扩展了React.Component{
静态导航选项={
标题：props=>wrappedHeader（props），
标题：“主屏幕”，
};
....
}

这是一个棘手的问题，确实让我思考了一会儿

我找到了一个解决方案，可以让选项卡栏导航器有一种原生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>
  );
}

对于标题，我想这一定是相同的技巧，但是您需要将

bottom:0

替换为

top:0

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