导航堆栈

我有一个StackNavigator，它包装着一个BottomTabNavigator，而每个标签都包含一个StackNavigator。要求是BottomTabNavigator如果在StackNavigator上，则根目录应具有相同的标头。

const AppNavigator = createBottomTabNavigator(
  {
    FeedNav: {
      screen: FeedNavigator,
    },
    SubmissionsNav: {
      screen: SubmissionsNavigator,
    },
    ProfileNav: {
      screen: ProfileNavigator,
    },
    DevNav: {
      screen: DevStuffContainer,
    },
  },
);

const AppStackWrapper = createStackNavigator(
  {
    Root: AppNavigator,
  },
  {
    navigationOptions: {
      header: props => {
        return <SOHeader {...props} />;
      },
    },
  }
);

`SOHeader`

class SOHeader extends React.Component<IHeaderComponentProps> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.logo, { textAlign: 'center' }]}>
          My Custom Header
        </Text>
      </View>
    );
  }
}

// Main logo
const logoWidth = screenDimens.width * 0.35;
const logoHeight = (logoWidth * 50) / 370;
const navHeight = isIphoneX() ? 88 : 64;
const marginTop = Constants.statusBarHeight;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,

    // iOS shadow:
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.4,
    shadowRadius: 8,

    // // Android:
    elevation: 2,
    paddingBottom: Platform.OS === 'ios' ? 0 : 3,

    // THE HACKS
    top: -Constants.statusBarHeight,
    height: navHeight,
    minHeight: navHeight,
    minWidth: screenDimens.width,
  },
  logo: {
    alignSelf: 'center',
    height: logoHeight,
    width: logoWidth,
    // marginLeft: drawerIconSize + 2 * iconHorizontalMargin, // Size of icon + the margin in both sides
    marginTop,
  },
});

export default SOHeader;

结果

因此，为了使标题完全显示出来，我需要对组件的minWidth和minHeight进行硬编码，这本身似乎很奇怪。为了获得最接近我期望结果的结果，我还必须添加 top: -Constants.statusBarHeight,：

// THE HACKS
top: -Constants.statusBarHeight,
minHeight: navHeight,
minWidth: screenDimens.width,

这导致a situation where there is a small gap between the header and the content, due to the negative top value

如果我删除top值，则改为looks like this，其中标题和状态栏分开，并且标题太大。设置较小的页眉高度会导致与解决方案1相同的间隙。我也尝试将headerStyle添加到navigationOptions上，但是没有效果。

我尝试过的东西

我尝试添加

<StatusBar
  backgroundColor="white"
  barStyle="dark-content"
  translucent={true}
/>

标头组件中的

，但没有任何效果，尽管translucent的文档说应用程序现在应该在状态栏下绘制。

在似乎无法进行minHeight样式的情况下，删除硬编码的react navigation header results in this。

要明确，目标是使标题看起来像第一个示例一样，但与下面的内容没有任何差异。具体来说，标题应与状态栏“合并”，均为白色。

任何建议都非常欢迎，谢谢！：-）

React Navigation 2.0-自定义标题组件

导航堆栈

`SOHeader`

结果

我尝试过的东西

0 个答案: