[英]Is there a way to scale a View in react-native?
我有一个反应原生的View
与一些组件。 虽然iPhone 6和5上的所有内容都能正常显示,但在iPhone 4s上查看时,其中一个组件的底部会略微被切断。
我看到有办法扩展base64图标。 有没有办法将整个容器视图缩小为统一更小或更大?
这样的事情对你有帮助吗?
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,
}
});
您的问题可以分为两部分:
1,缩放width
, height
, paddings
和margins
。 这些可以通过使用%
和aspectRatio
轻松实现。
2,要缩放Text
,您可能需要考虑使用Extended StyleSheet ,它允许您使用rem
。
您可以简单地按照教程“ 为所有屏幕尺寸开发React Native UI的7个技巧 ”来了解如何使用上述提示。
另外,请查看Extended StyleSheet Scaling ,它允许使用$scale
变量来根据条件进行缩放。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.