React Native中DP、SP等字体单位适配及代码转换求助

Hey there! I’ve been in your shoes when translating Zeplin’s Android XML to React Native, so let me walk you through this step by step.

First: Dealing with DP/SP Units in React Native #

You don’t need pixel density info to reuse these values—React Native’s layout system is built to handle density automatically:

• Android DP: React Native’s default unit is equivalent to Android’s DP. So any DP value from your XML can be directly used as a numeric value in RN styles (no unit suffix needed).
• Android SP: React Native’s fontSize property behaves exactly like Android’s SP—it automatically adapts to the user’s system font scaling settings. Just take the SP value from your XML and assign it directly to fontSize in RN.

If you ever need more granular control over pixel density, you can use the PixelRatio API, but for most cases (like your Zeplin specs), the direct mapping works perfectly.

Converting Your TextView Components to React Native Text #

Here’s how to translate each of your TextView elements into React Native’s Text component, with all styles mapped correctly:

First TextView Conversion #

Original Android XML:

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="18.7sp" 
    android:fontFamily="sans-serif-medium" 
    android:textStyle="normal" 
    android:textColor="#ffffff" 
    android:lineSpacingExtra="-18.7sp" 
    tools:text="60" />

React Native equivalent:

import { Text } from 'react-native';

// ... inside your component
<Text
  style={{
    width: 'auto', // Equivalent to wrap_content
    height: 'auto',
    fontSize: 18.7, // Matches 18.7sp
    fontFamily: 'sans-serif-medium',
    color: '#ffffff',
    lineHeight: 18.7 + (-18.7), // lineSpacingExtra added to textSize
    // textStyle is normal, so no need for fontWeight/italic here
  }}
>
  60
</Text>

Second TextView Conversion #

Original Android XML:

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="32sp" 
    android:fontFamily="sans-serif-medium" 
    android:textStyle="normal" 
    android:textColor="#70c300" 
    android:lineSpacingExtra="-32sp" 
    tools:text="20" />

React Native equivalent:

import { Text } from 'react-native';

// ... inside your component
<Text
  style={{
    width: 'auto',
    height: 'auto',
    fontSize: 32, // Matches 32sp
    fontFamily: 'sans-serif-medium',
    color: '#70c300',
    lineHeight: 32 + (-32), // Calculate lineHeight from textSize + lineSpacingExtra
  }}
>
  20
</Text>

Quick Notes to Keep in Mind #

• Font Family Compatibility: sans-serif-medium works natively on Android, but iOS doesn’t recognize this font name. If you need cross-platform consistency, you’ll want to import a custom font (like Roboto Medium) or use platform-specific style overrides.
• Line Spacing Behavior: Android’s lineSpacingExtra adds (or subtracts) space on top of the default line height. In React Native, we calculate lineHeight by adding lineSpacingExtra to the fontSize to match the Android behavior exactly.
• Default Styles: React Native’s Text component defaults to wrap_content for width/height, so you can omit those style properties if you want.

内容的提问来源于stack exchange，提问作者otavio1992