javascript - 如何从反应导航更改底部材质选项卡导航器的高度

Question

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

这就是它的外观（电话）

这就是它在平板电脑上的样子

Answer 1

您可以使用像素比

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
  }
}

使用：

字体大小：规范化（24）

您可以更进一步，允许按预定义尺寸在每个组件上使用尺寸。

例子：

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

如果你看例子，有链接

https://demo.mobiscroll.com/react/navigation/tabs#

https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23

Answer 2

您可以使用道具barStyle更改底部选项卡的高度。

例子：

createMaterialBottomTabNavigator(
   {
      Home: {
        home: {screen: Main},
      },
      Setting: {
        setting: {screen: Setting},
      },
   },
   {
      initialRouteName: 'Room',
      barStyle: { backgroundColor: '#fff', height: 50 },
   },
);

Answer 3

您可以使用该道具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的风格，那么你可以从barstyleprops改变风格。请参考此链接。

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