Kích thước phông chữ đáp ứng React Native

Tôi muốn hỏi làm thế nào phản ứng gốc xử lý hoặc làm cho phông chữ đáp ứng. Ví dụ trong iphone 4s, tôi có fontSize: 14, trong khi ở iphone 6 tôi có fontSize: 18.

Bạn có thể sử dụng PixelRatio

ví dụ:

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

Biên tập:

Một vi dụ khac:

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

Sử dụng:

fontSize: normalize(24)

bạn có thể tiến thêm một bước nữa bằng cách cho phép sử dụng kích thước trên mọi <Text />thành phần theo kích thước được xác định trước.

Thí dụ:

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

Chúng tôi sử dụng một hàm utils đơn giản, dễ hiểu, mở rộng quy mô mà chúng tôi đã viết:

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

Giúp bạn tiết kiệm thời gian thực hiện nhiều ifs. Bạn có thể đọc thêm về nó trên bài đăng trên blog của tôi .

Vì các đơn vị đáp ứng không có sẵn trong react-native vào lúc này, tôi cho rằng cách tốt nhất của bạn là phát hiện kích thước màn hình và sau đó sử dụng kích thước đó để suy ra loại thiết bị và đặt fontSize có điều kiện.

Bạn có thể viết một mô-đun như:

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

Bạn sẽ chỉ cần tra cứu chiều rộng và chiều cao mặc định cho mỗi thiết bị. Nếu chiều rộng và chiều cao bị lật khi thiết bị thay đổi hướng, bạn có thể sử dụng tỷ lệ khung hình để thay thế hoặc chỉ cần tìm ra phần nhỏ hơn của hai kích thước để tìm ra chiều rộng.

Đây mô-đun hoặc một này có thể giúp bạn tìm thấy kích thước thiết bị hoặc loại thiết bị.

Hãy xem thư viện tôi đã viết: https://github.com/tachyons-css/react-native-style-tachyons

Nó cho phép bạn chỉ định root-fontSize ( rem) khi bắt đầu, mà bạn có thể thực hiện tùy thuộc vào PixelRatiođặc điểm thiết bị của bạn hoặc thiết bị khác.

Sau đó, bạn nhận được các kiểu liên quan đến của bạn rem, không chỉ fontSize, mà còn paddings, v.v.:

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

Giải thích:

• f5luôn luôn là kích thước phông chữ cơ sở của bạn
• pa2 cung cấp cho bạn khoảng đệm so với kích thước phông chữ cơ sở của bạn.

Tôi chỉ đơn giản là sử dụng tỷ lệ kích thước màn hình, điều này phù hợp với tôi.

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

Kiểm tra

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}

adjustsFontSizeToFitvà numberOfLineslàm việc cho tôi. Họ chỉnh email dài thành 1 dòng.

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

Tôi đã khắc phục được điều này bằng cách làm như sau.

1. Chọn kích thước phông chữ bạn thích cho chế độ xem hiện tại mà bạn có (Đảm bảo rằng nó trông đẹp cho thiết bị hiện tại bạn đang sử dụng trong trình mô phỏng).

2. import { Dimensions } from 'react-native' và xác định chiều rộng bên ngoài của thành phần như sau: let width = Dimensions.get('window').width;

3. Bây giờ console.log (width) và viết nó ra. Nếu kích thước phông chữ đẹp mắt của bạn là 15 và chiều rộng của bạn là 360 chẳng hạn, thì lấy 360 và chia cho 15 (= 24). Đây sẽ là giá trị quan trọng sẽ điều chỉnh theo các kích thước khác nhau.

   Sử dụng số này trong đối tượng kiểu của bạn như sau: textFontSize: { fontSize = width / 24 },...

Bây giờ bạn có một fontSize đáp ứng.

Chúng ta có thể sử dụng bố cục flex và sử dụng AdjustsFontSizeToFit = {true} cho các kích thước phông chữ đáp ứng. Và văn bản sẽ điều chỉnh theo kích thước của vùng chứa.

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

Nhưng trong các kiểu, bạn cũng cần phải đặt một kích thước phông chữ thì điều chỉnh đó sẽ hoạt động.

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

Gần đây tôi đã gặp sự cố này và kết thúc bằng cách sử dụng biểu định kiểu react-native-Extended-styles

Bạn có thể đặt cho mình remgiá trị và các điều kiện kích thước bổ sung dựa trên kích thước màn hình. Theo tài liệu:

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

Tại sao không sử dụng PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, nó giống như pdcác đơn vị trong Android.

import { Dimensions } from 'react-native';

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

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

fontScalenhận được quy mô theo thiết bị của bạn .

Cần sử dụng cách này Tôi đã sử dụng cách này và nó hoạt động tốt.

react-native-responsive-screen npm cài đặt react-native-responsive-screen --save

Giống như tôi có một thiết bị 1080x1920

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

Nó hoạt động cho tất cả các thiết bị

Một cách tiếp cận hơi khác phù hợp với tôi: -

const normalize = (size: number): number => {
  const scale = screenWidth / 320;
  const newSize = size * scale;
  let calculatedSize = Math.round(PixelRatio.roundToNearestPixel(newSize))

  if (PixelRatio.get() < 3)
    return calculatedSize - 0.5
  return calculatedSize
};

Hãy tham khảo Pixel Ratio vì điều này cho phép bạn thiết lập chức năng tốt hơn dựa trên mật độ thiết bị.

Bạn có thể sử dụng một cái gì đó như thế này.

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

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

Hy vọng điều này sẽ giúp mà không cần cài đặt bất kỳ thư viện của bên thứ ba.