我想问一下如何反应原生句或做响应式字体。例如在iphone 4s中我有fontSize:14,而在iphone 6中我有fontSize:18。
你可以使用PixelRatio
例如:
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)
您可以更进一步,允许通过预定义的尺寸在每个<Text />
组件上使用尺寸。
例:
const styles = {
mini: {
fontSize: normalize(12),
},
small: {
fontSize: normalize(15),
},
medium: {
fontSize: normalize(17),
},
large: {
fontSize: normalize(20),
},
xlarge: {
fontSize: normalize(24),
},
};
我们可以使用flex布局并使用adjustsFontSizeToFit = {true}来响应字体大小。文本将根据容器的大小进行调整。
<Text
adjustsFontSizeToFit
style={styles.valueField}>{value}
</Text>
但是在样式中你需要放置一个fontsize然后才会调整.FontSizeToFit工作。
valueField: {
flex: 3,
fontSize: 48,
marginBottom: 5,
color: '#00A398',
},
为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);
,它与Android中的pd
单位相同。
你可以使用这样的东西。
var {height,width} = Dimensions.get('window'); var textFontSize = width * 0.03;
inputText: {
color : TEXT_COLOR_PRIMARY,
width: '80%',
fontSize: textFontSize
}
希望这有助于不安装任何第三方库。
我们使用一个简单,直接,缩放的utils函数编写:
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
export {scale, verticalScale, moderateScale};
节省你做一些ifs的时间。你可以在my blog post上阅读更多相关信息。
ScaledSheet
in the package, which is an automatically scaled version of StyleSheet
.
You can find it here: react-native-size-matters.
因为响应单元目前不具备反应原则,我认为最好的办法是检测屏幕大小,然后使用它来推断设备类型并有条件地设置fontSize。
你可以写一个像这样的模块:
function fontSizer (screenWidth) {
if(screenWidth > 400){
return 18;
}else if(screenWidth > 250){
return 14;
}else {
return 12;
}
}
您只需要查看每个设备的默认宽度和高度。如果在设备更改方向时翻转宽度和高度,您可以使用纵横比,或者只计算两个尺寸中较小的一个来计算宽度。
看看我写的图书馆:https://github.com/tachyons-css/react-native-style-tachyons
它允许您在开始时指定root-fontSize(rem
),您可以根据您的PixelRatio
或其他设备特征来指定它。
然后你得到相对于你的rem
的样式,不仅是fontSize,还有paddings等:
<Text style={[s.f5, s.pa2, s.tc]}>
Something
</Text>
说明:
f5
is总是你的base-fontsizepa2
为您提供相对于base-fontsize的填充。我只是使用屏幕尺寸的比例,这对我来说很好。
const { width, height } = Dimensions.get('window');
// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;
const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);
export const scaledSize =
(size) => Math.ceil((size * scale));
测试
const size = {
small: scaledSize(25),
oneThird: scaledSize(125),
fullScreen: scaledSize(375),
};
console.log(size);
// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}
adjustsFontSizeToFit
和numberOfLines
为我工作。他们将长电子邮件调整为1行。
<View>
<Text
numberOfLines={1}
adjustsFontSizeToFit
style={{textAlign:'center',fontSize:30}}
>
{this.props.email}
</Text>
</View>
从'react-native'导入{Dimensions};
const {width,fontScale} = Dimensions.get(“window”);
const styles = StyleSheet.create({fontSize:idleFontSize / fontScale,});
fontScale根据您的设备获得比例。
我设法通过以下方式克服了这个问题。
import { Dimensions } from 'react-native'
并定义组件外部的宽度,如:let width = Dimensions.get('window').width;
textFontSize: { fontSize = width / 24 },...
现在你有一个响应字体大小。
我最近遇到了这个问题,最后使用react-native-extended-stylesheet
您可以根据屏幕尺寸设置rem
值和其他尺寸条件。根据文档:
// component
const styles = EStyleSheet.create({
text: {
fontSize: '1.5rem',
marginHorizontal: '2rem'
}
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
$rem: width > 340 ? 18 : 16
});