如何从反应导航更改底部物料标签导航器的高度

Question

我正在尝试创建一个自适应应用程序，该应用程序在每个屏幕尺寸上都看起来不错。唯一无法正确缩放的是底部导航器（this one）。平板电脑是最大的问题，因为导航栏太小。有谁知道如何访问它的高度或以其他方式更改它？

这是它的外观（电话）

这是平板电脑上的外观

Answer 1

您可以使用道具tabBarOptions设置标签栏的样式。请参考此链接。

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaroptions

或者您可以通过使用tabBarComponent中的createBottomTabNavigator道具来创建自己的标签栏。

const Tabs = createBottomTabNavigator(
  {
    ...FirstTab,
    ...SecondTab,
  },
  {
    tabBarComponent: props => (
      <View>
        <CustomTabBar/>
      </View>
    );
  },
);

并且如果您想更改material-bottom-tab-bar的样式，则可以从barstyle道具中更改样式。请参考此链接。

https://reactnavigation.org/docs/material-bottom-tab-navigator/#barstyle

Answer 2

您可以使用像素比率

https://reactnative.dev/docs/pixelratio.html

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

另一个例子

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

Usgae：

fontSize：normalize（24）

您可以通过按预先定义的大小在每个组件上使用大小来进一步走动。

示例：

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
}