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

乌斯加：

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

如果您要查看示例，则有链接

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 3

你可以使用道具barStyle来改变底部标签的高度。

示例：

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

如何从反应导航更改底部物料选项卡导航器的高度

3 个答案: