Есть ли способ масштабирования View в реагировать на родной?

0

У меня есть View in react-native с несколькими компонентами. Пока все правильно отображается на iPhone 6 и 5, при просмотре его на iPhone 4s, нижняя часть одного из компонентов слегка отключается.

Я вижу, есть способы масштабирования значков base64. Есть ли способ масштабировать весь контейнер View, чтобы он был равномерно меньше или больше?

  • 1
    Вы можете масштабировать с помощью transform если это то, что вы ищете. В противном случае вы можете опубликовать код для ваших иконок?
  • 0
    Можем ли мы применить transform к любому представлению или другому компоненту?
Показать ещё 1 комментарий
Теги:
react-native

2 ответа

0

Ваш вопрос можно разбить на две части:

1, Чтобы масштабировать width, height, paddings и margins. Их можно легко достичь, используя % и aspectRatio.

2, Чтобы масштабировать Text, вам может потребоваться использовать Extended StyleSheet, который позволяет использовать rem.

Вы можете просто следовать руководству " 7 советов по разработке реальных пользовательских интерфейсов для всех экранов ", как использовать приведенные выше советы.

Кроме того, проверьте расширенное масштабирование StyleSheet, которое позволяет использовать переменную $scale для масштабирования на условиях.

0

Помогает ли вам подобное?

YourStyleSheet.js

import {StyleSheet} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');


export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {sm,md,lg, ...style} = {...styles[name]};
    // iphone 4s and older
    if(sm && width < 375){

      style = {...style, ...sm};
    }
    // iphone 5,5s
    if(md && width >= 375 && width <414){

      style = {...style, ...md};
    }
    // iphone 6 and bigger
    if(lg && width >= 414){

      style = {...style, ...lg};
    }


    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

Затем в вашем стиле вы можете указать размер компонента на разных размерах экрана, как это

import YourStyleSheet from './path/YourStyleShett'    
const styles = YourStyleSheet.create({
      component:{
        sm:{fontSize: 20,},
        md:{fontSize: 30,},
        lg:{fontSize: 30,},
        textAlign: 'center',
        marginBottom: 10,
        fontWeight:'bold',
        color:colors.white,
      }
    });
  • 0
    Я искал более общее решение. Кажется, transform была.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню