Как изменить высоту нижнего вкладка материала навигатора от реакции-навигации - PullRequest
Новая
       84

Как изменить высоту нижнего вкладка материала навигатора от реакции-навигации

0 голосов
/ 15 марта 2020

Я пытаюсь создать адаптивное приложение, которое будет хорошо смотреться на экране любого размера. Единственное, что не масштабируется должным образом, - это нижний навигатор ( этот ). Планшеты - самая большая проблема, потому что навигационная панель слишком мала. Кто-нибудь знает, как получить доступ к его высоте или изменить его по-другому?

Вот так это должно выглядеть (телефон)

enter image description here

Вот как это выглядит на планшетах enter image description here

Ответы [ 2 ]

0 голосов
/ 16 марта 2020

Вы можете использовать Пиксельное соотношение

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)

Вы можете go сделать шаг вперед, разрешив использовать размеры для каждого компонента по заранее определенному размеру.

Пример: 

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

0 голосов
/ 15 марта 2020

Вы можете использовать опору tabBarOptions для стилизации панели вкладок. Пожалуйста, обратитесь к этой ссылке.

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

Или вы можете создать свою собственную панель вкладок, используя tabBarComponent prop в createBottomTabNavigator. 

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

И если вы хотите изменить стиль материала-bottom-tab-bar, вы можете изменить стиль с barstyle реквизита. Пожалуйста, обратитесь по этой ссылке. 

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