React Native Responsive Font Size

问题:

I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18.

回答1:

You can use PixelRatio

for example:

var React = require('react-native');  var {StyleSheet, PixelRatio} = React;  var FONT_BACK_LABEL   = 18;  if (PixelRatio.get() 

Edit:

Another example:

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) {   if (Platform.OS === 'ios') {     return Math.round(PixelRatio.roundToNearestPixel(size))   } else {     return Math.round(PixelRatio.roundToNearestPixel(size)) - 2   } } 

Usage:

fontSize: normalize(24) 

you can go one step further by allowing sizes to be used on every components by pre-defined sized.

Example:

const styles = {   mini: {     fontSize: normalize(12),   },   small: {     fontSize: normalize(15),   },   medium: {     fontSize: normalize(17),   },   large: {     fontSize: normalize(20),   },   xlarge: {     fontSize: normalize(24),   }, }; 

回答2:

We use a simple, straight-forward, scaling utils functions we wrote:

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

Saves you some time doing many ifs. You can read more about it on 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.

回答3:

Because responsive units aren't available in react-native at the moment, I would say your best bet would be to detect the screen size and then use that to infer the device type and set the fontSize conditionally.

You could write a module like:

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

You'll just need to look up what the default width and height are for each device. If width and height are flipped when the device changes orientation you might be able to use aspect ratio instead or just figure out the lesser of the two dimensions to figure out width.

This module or this one can help you find device dimensions or device type.

回答4:

Take a look at the library I wrote: https://github.com/tachyons-css/react-native-style-tachyons

It allows you to specify a root-fontSize (rem) upon start, which you can make dependent of your PixelRatio or other device-characteristics.

Then you get styles relative to your rem, not only fontSize, but paddings etc. as well:

      Something 

Expanation:

• f5is always your base-fontsize
• pa2 gives you padding relative to your base-fontsize.

回答5:

I managed to overcome this by doing the following.

1. Pick the font size you like for the current view you have (Make sure it looks good for the current device you are using in the simulator).

2. import { Dimensions } from 'react-native' and define the width outside of the component like so: let width = Dimensions.get('window').width;

3. Now console.log(width) and write it down. If your good looking font size is 15 and your width is 360 for example, then take 360 and divide by 15 ( = 24). This is going to be the important value that is going to adjust to different sizes.

   Use this number in your styles object like so: textFontSize: { fontSize = width / 24 },...

Now you have a responsive fontSize.

文章来源: React Native Responsive Font Size