如何在NativeBase中覆盖主题尺寸以使用rem单位？

要实现无需自定义函数即可用rem单位（包括mb={2}对应2rem或直接写mb="2rem"），需要针对NativeBase的主题系统做正确配置，以下是具体步骤：

一、核心配置：同时覆盖space和sizes主题字段 #

NativeBase中，margin/padding等间距属性读取的是theme.space，而width/height等尺寸属性读取theme.sizes，你之前只配置了sizes所以间距没生效。直接在主题中定义带rem单位的数值即可：

import { extendTheme } from 'native-base';

const myCustomTheme = extendTheme({
  // 配置间距（对应margin、padding类属性）
  space: {
    0: '0rem',
    1: '1rem',   // 对应16px
    2: '2rem',   // 对应32px
    3: '3rem',
    // 按需添加更多尺寸
  },
  // 配置尺寸（对应width、height、minWidth类属性）
  sizes: {
    0: '0rem',
    1: '1rem',
    2: '2rem',
    3: '3rem',
    // 按需添加更多尺寸
  },
});

二、应用自定义主题 #

将配置好的主题传入NativeBaseProvider，确保全局生效：

import { NativeBaseProvider, Button } from 'native-base';

export default function App() {
  return (
    <NativeBaseProvider theme={myCustomTheme}>
      {/* 使用主题配置的数值，自动对应rem单位 */}
      <Button mb={2}>My Button</Button>
      {/* Web端可直接写rem字符串 */}
      <Button mb="2rem">My Button with rem</Button>
    </NativeBaseProvider>
  );
}

三、跨平台适配（iOS/Android/Web） #

React Native原生端（iOS/Android）不支持rem单位，若需跨平台兼容，可通过平台判断自动切换单位（Web用rem，Native用dp，1dp≈1px在标准设备上）：

import { extendTheme } from 'native-base';
import { Platform } from 'react-native';

const unit = Platform.select({ web: 'rem', default: 'dp' });

const myCustomTheme = extendTheme({
  space: {
    0: `0${unit}`,
    1: `1${unit}`,
    2: `2${unit}`,
    // ...
  },
  sizes: {
    0: `0${unit}`,
    1: `1${unit}`,
    2: `2${unit}`,
    // ...
  },
});

关键说明 #

• Web端直接写mb="2rem"是有效的，NativeBase会将其作为CSS值传递；但原生端不识别rem，所以跨平台项目更推荐mb={2}的写法，通过主题自动适配单位。
• 若需要更多预设尺寸，可参考NativeBase原生主题的space和sizes结构扩展。

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