反應導航-在Blurview中包裝標題和標簽導航器會松開道具

Question

我正在將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",
    };
   ....
}

Answer 1

這是一個棘手的問題，確實讓我思考了一會兒。

這是我發現的用於標簽欄導航器的本機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,
});

對於標題，我想它必須是相同的技巧，但是您需要將top: 0替換為bottom: 0 top: 0 。