本机响应字体大小

由于响应单元目前还不能用于本地反应，我认为最好的办法是检测屏幕大小，然后使用它来推断设备类型，并有条件地设置字体大小。

您可以编写如下模块:

function fontSizer (screenWidth) {
if(screenWidth > 400){
return 18;
}else if(screenWidth > 250){
return 14;
}else {
return 12;
}
}

您只需要查找每个设备的默认宽度和高度。如果宽度和高度在设备改变方向时被翻转，你可以使用长宽比来代替，或者只是计算出两个维度中较小的一个来计算宽度。

此 模组或 这个可以帮助您查找设备尺寸或设备类型。

你可以使用 像素比率

例如:

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),
},
};

看看我写的库: https://github.com/tachyons-css/react-native-style-tachyons

它允许您在启动时指定 root-fontSize (rem) ，这可以依赖于您的 PixelRatio或其他设备特性。

然后你会得到相对于 rem的样式，不仅仅是字体大小，还有填充等等:

<Text style={[s.f5, s.pa2, s.tc]}>
Something
</Text>

扩展:

• f5始终是您的基本字体大小
• pa2提供相对于基本字体大小的填充。

我们使用一个简单、直接、可伸缩的 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};

节省你一些时间做许多如果。你可以阅读更多关于它的 我的博客文章。

我通过以下方法克服了这个问题。

1. 为当前视图选择您喜欢的字体大小(确保 中使用的当前设备看起来不错 模拟器)

2. 并定义宽度 在组件外部如下: let width = Dimensions.get('window').width;

3. 现在记录下来，如果你的字体好看的话 大小是15，你的宽度是360，例如，然后采取360和 除以15(= 24)。这将是 将会适应不同的尺寸。

   在样式对象中使用这个数字，如下所示: textFontSize: { fontSize = width / 24 },...

现在您有了响应字体大小。

你可以用这个。

Var { height，width } = 维数 s.get (‘ window’) ; 大小 = 宽度 * 0.03;

inputText: {
color : TEXT_COLOR_PRIMARY,
width: '80%',
fontSize: textFontSize
}

希望这对不安装任何第三方库有所帮助。

我只是使用屏幕大小的比例，这对我来说很好。

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}

我最近遇到了这个问题，最终使用了 本机扩展样式表

您可以根据屏幕大小设置 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
});

import { Dimensions } from 'react-native';


const { width, fontScale } = Dimensions.get("window");


const styles = StyleSheet.create({
fontSize: idleFontSize / fontScale,
});

fontScale根据您的设备获得比例。