У меня есть View
in react-native с несколькими компонентами. Пока все правильно отображается на iPhone 6 и 5, при просмотре его на iPhone 4s, нижняя часть одного из компонентов слегка отключается.
Я вижу, есть способы масштабирования значков base64. Есть ли способ масштабировать весь контейнер View, чтобы он был равномерно меньше или больше?
Ваш вопрос можно разбить на две части:
1, Чтобы масштабировать width
, height
, paddings
и margins
. Их можно легко достичь, используя %
и aspectRatio
.
2, Чтобы масштабировать Text
, вам может потребоваться использовать Extended StyleSheet, который позволяет использовать rem
.
Вы можете просто следовать руководству " 7 советов по разработке реальных пользовательских интерфейсов для всех экранов ", как использовать приведенные выше советы.
Кроме того, проверьте расширенное масштабирование StyleSheet, которое позволяет использовать переменную $scale
для масштабирования на условиях.
Помогает ли вам подобное?
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,
}
});
transform
была.
transform
если это то, что вы ищете. В противном случае вы можете опубликовать код для ваших иконок?transform
к любому представлению или другому компоненту?