React Native Responsive字体大小

问题描述 投票:42回答:12

我想问一下如何反应原生句或做响应式字体。例如在iphone 4s中我有fontSize:14,而在iphone 6中我有fontSize:18。

ios reactjs react-native
12个回答
46
投票

你可以使用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),
  },
};

1
投票

我们可以使用flex布局并使用adjustsFontSizeToFit = {true}来响应字体大小。文本将根据容器的大小进行调整。

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

但是在样式中你需要放置一个fontsize然后才会调整.FontSizeToFit工作。

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},

1
投票

为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);,它与Android中的pd单位相同。


-2
投票

你可以使用这样的东西。

var {height,width} = Dimensions.get('window'); var textFontSize = width * 0.03;

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

希望这有助于不安装任何第三方库。


29
投票

我们使用一个简单,直接,缩放的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上阅读更多相关信息。


Edit: I thought it might be helpful to extract these functions to their own npm package, I also included ScaledSheet in the package, which is an automatically scaled version of StyleSheet. You can find it here: react-native-size-matters.

7
投票

因为响应单元目前不具备反应原则,我认为最好的办法是检测屏幕大小,然后使用它来推断设备类型并有条件地设置fontSize。

你可以写一个像这样的模块:

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

您只需要查看每个设备的默认宽度和高度。如果在设备更改方向时翻转宽度和高度,您可以使用纵横比,或者只计算两个尺寸中较小的一个来计算宽度。

这个modulethis one可以帮助您查找设备尺寸或设备类型。


6
投票

看看我写的图书馆: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>

说明:

  • f5is总是你的base-fontsize
  • pa2为您提供相对于base-fontsize的填充。

4
投票

我只是使用屏幕尺寸的比例,这对我来说很好。

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}

3
投票

adjustsFontSizeToFitnumberOfLines为我工作。他们将长电子邮件调整为1行。

<View>
  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
    style={{textAlign:'center',fontSize:30}}
  >
    {this.props.email}
  </Text>
</View>

2
投票

从'react-native'导入{Dimensions};

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

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

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


1
投票

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

  1. 选择您喜欢的当前视图的字体大小(确保它对于您在模拟器中使用的当前设备看起来很好)。
  2. import { Dimensions } from 'react-native'并定义组件外部的宽度,如:let width = Dimensions.get('window').width;
  3. 现在调用console.log(width)并将其写下来。如果你看起来好看的字体大小为15,宽度为360,那么取360并除以15(= 24)。这将是适应不同规模的重要价值。 在样式对象中使用此数字,如下所示:textFontSize: { fontSize = width / 24 },...

现在你有一个响应字体大小。


1
投票

我最近遇到了这个问题,最后使用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
});
© www.soinside.com 2019 - 2024. All rights reserved.